Issues are arising with CSS .not(selector) functionality when applied to a span element

One of the challenges I'm facing is formatting a header with a span tag that contains a date and some accompanying text. The goal is to make the text bold without affecting the formatting of the date.

In my CSS file, I have tried using :not(cls) to target specific elements, but it seems to be impacting the styling of the date as well.

.parent {
  display: flex;
}

.parent:not(.date) {
  font-weight: bold;
}

.date {
  padding-right: 20px;
}
<div class="parent">
  <span class="date">the date</span> title goes here
</div>

What am I missing in this setup?

htmlcss

Answer №1

.parent:not(.date) refers to an element that belongs to the parent class but does not belong to the data class.

Since there are no elements with the class parent date, the :not() part becomes redundant.

In this case, the selector was never going to target the span because it does not have the class parent.

You can inspect the element using the DOM inspector in your browser.

https://i.stack.imgur.com/D4a6S.png

The default value of the font-weight property for a span element is inherit, meaning it will inherit from its parent element.

To avoid having it bold, you need to specify it explicitly.

.parent {
  display: flex;
}

.parent {
  font-weight: bold;
}

.date {
  font-weight: normal;
  padding-right: 20px;
}
<div class="parent">
  <span class="date">the date</span> title goes here
</div>

Answer №2

Is it possible to approach it in this manner?

.wrapper {
  display: flex;
  font-style: italic;
}

.time {
  padding-right: 20px;
  font-style: normal;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery, it is possible to eliminate a div element without affecting its contents

<div class="a"> <div class="b"> <ul> <li>Element A</li> <li>Element B</li> </ul> </div> </div> How can I eliminate div class="b" solely? I require the presence of div a, u ...

javascriptjqueryhtml

Achieve a disabled scroll bar feature on Firefox

I am experiencing an issue with a Javascript tabbed dialog where the pages have varying heights. Some of them are larger than the browser window. In Internet Explorer, there is always a scrollbar present on the right side. When it is not needed, it appear ...

htmlcssinternet-explorerfirefoxscrollbar

Binding event listeners to dynamically created elements poses a challenge

I am facing difficulty in adding an event listener to dynamically created elements. The issue lies in my code where I am unable to detect the insertion of <p> element resulting in the lack of console message Bar Inserted. Could you point out if there ...

jqueryhtml

Learning how to utilize localStorage in conjunction with a color picker to modify the --var of :root

After spending an entire afternoon on my JavaScript issue as a beginner, I have a specific goal in mind: allowing the user to select and change the main color of the page. To implement this, I inserted a color picker in my HTML: <input type="color ...

javascripthtmlcss

Tips for deleting "Category: [category name]" in Wordpress

I have attempted various solutions found in previous threads, but none of them seem to work for me. Here is a screenshot I am looking to remove the text from the header in the category and only display [category name]. Can anyone assist me with this, ple ...

phpcsswordpressheadercategories

Styling with CSS in a React component

I am trying to display a row of buttons instead of columns on my webpage. I have used display:flex but it is still showing as a column. What I want is for each button to display the first character of its name underneath it, with all buttons lined up next ...

cssreactjs

The items in the Bootstrap dropdown are not displaying

I am currently working on a project using Angular 12, and I encountered an issue with my Bootstrap dropdown menu not displaying any items. Below is the HTML code snippet causing the problem: <nav class="navbar navbar-expand navbar-dark"> ...

htmlangularbootstrap-4angular-ui-bootstrap

What is the best way to ensure that only one of two textboxes is filled out in an HTML form?

Looking to create 2 fields that are mutually exclusive. One will be a FileField and the other a TextBoxField. Is there an HTML form template available for this specific scenario? I've scoured the web but haven't come across one yet. Apologies ...

htmldjango

Unable to integrate Django into HTML

Having trouble using Django variables within HTML code Here is the code snippet: models.py from django.db import models from django.urls import reverse # Define models here. class Post(models.Model): title = models.CharField(max_length=255) slug ...

pythonhtmldjango

Compatibility of Blackberry Webworks

As I prepare to build a Webworks app, the documentation indicates that it is designed to function only on devices equipped with OS 5.0 or later. However, I am curious if there exists a way to make the app compatible with devices running an OS version lower ...

javahtmlblackberry

What are some effective methods for preventing CodeMirror from appearing as a blank white box upon initialization?

In my project with Codemirror version 5.62.3 and the 'monokai' theme set to a dark background, I am facing an issue where upon reloading the page, the CodeMirror initializes as a small white box before the proper styling is applied. I have attemp ...

cssloadingstylingcodemirror

Display the HTML code in its formatted text output

I am currently facing an issue while trying to take input from the user using the WYSIWYG text editor plugin. When I attempt to display the text in a label or paragraph, all the HTML tags become visible. For instance, @string str = "<b>sample text&l ...

html

Submenu in submenu not registering CSS hover events

Currently, on a website project that I'm developing, there is a submenu nested within another submenu. Interestingly enough, the level-2 submenu happens to be taller than its parent level-1 submenu. To control the visibility of these submenus, I' ...

htmlcss

Introducing a new div element completely disrupts the overall layout

Take a look at the code I have provided below. http://jsfiddle.net/xymgwonu/3/ Everything was working perfectly fine until I introduced a new div with the class name <div class="bubble"></div>. This caused some issues with the overall design. ...

htmlcssbootstrap-4

What are the steps to effectively utilize <ul> for showcasing scrolling content?

I stumbled upon and found it to be a great inspiration for my project. I tried replicating the layout of the listed items on the site: .wrap { display: block; list-style: none; position: relative; padding: 0; margin: 0; border: ...

javascripthtmlcss

Is there a way to adjust only the height of a responsive image?

Increasing the Height of an Image on a Mobile Device! I have an image that displays as the header of my website. When I resize the window to mobile format, the image resizes too. However, I want the height of the header image to be longer! Is this possibl ...

csshtml

Applying style changes to the height on scroll event in Javascript for Chrome, Firefox, and Internet Explorer

I am working on triggering an event when scrolling to a specific height. I have code that successfully adds a style in Chrome, but it is not functioning properly in IE. Can anyone provide assistance? myID = document.getElementById("subnav"); var mySc ...

javascripthtmlcss

Efficiently handling jumbled strings in Python: A guide to parsing

Looking to pull out ID numbers and their pass/fail status from an XML file, the data I have is messy and I'm new to Python. Specifically, I have a list of strings with the info and need to extract the codes and status. Currently, I'm struggling w ...

pythonhtmlstringlistbeautifulsoup

Look for specific content within a div tag and display that div at the top of the page

<div class="search-container"> <input type="text" class="input-medium search-query" placeholder="Search"> <button type="button" class="btn">Search</button> </div> <div class="panel panel-default"> ...

jqueryhtml

My div won't stay fixed in the layout no matter what I try

Being fairly new to css, divs, and everything in between, I decided to create a simple layout for my band without unnecessary links like bio or merch store. Instead, I wanted separate spaces for our video, music player, and a Facebook window. I successful ...

csslayouthtml