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

Is there any advantage to placing buttons within an HTML form?

What benefits are there to placing a button within an HTML form as opposed to directly in the body? <form id="viewForm" method="post"> <input id="editBtn" type="button" value="Edit" /> </form> ...

html

What is the process of video buffering in HTML5?

Is automatic buffering handled by HTML5? I'm planning to use video tags to display user-uploaded videos in my application. From what I've gathered, HTML5 buffers videos differently depending on the client's browser, with buffering varying ba ...

htmlhtml5-video

personalizing material-ui component styles – set select component color to be pure white

I am looking to implement a dropdown menu using material-ui components (refer to https://material-ui.com/components/selects/). To do so, I have extracted the specific component from the example: Component return <div> <FormControl variant="outli ...

javascriptcssreactjscomponentsmaterial-ui

Spontaneous Lettering using HTML Tags

Have you ever tried using a random letter as an HTML tag? I was experimenting with it and found that even though 'f' isn't a standard tag, it functions similarly to a span tag in some cases. I know this may be a silly question, but I've ...

htmltags

Employing CSS animations to elevate div elements

Currently, I am working on animating a table of divs and trying to achieve an effect where a new div enters and "bumps up" the existing ones. In my current setup, Message i3 is overlapping Message 2 instead of bumping it up. How can I make Messages 1 and 2 ...

javascriptjqueryhtmlcsscss-animations

"Entering a text message will prompt the appearance of the on-screen keyboard in capital

Our website is optimized for use on Android tablets. I have added the following CSS to the input's class: text-transform: uppercase; While this successfully displays typed letters in uppercase, it does not change the appearance of the on-screen keyb ...

asp.net.nethtmlcsshtml-input

Is it possible to create a CSS1 sprite animation triggered by a mouse hover

Is there a way to create sequential image loading on mouse hover for a CSS1 Sprite, similar to an animation? Please refrain from suggesting CSS3 solutions as not all browsers fully support CSS3 animations. Thank you. ...

cssanimationhovermousesprite

Learn how to implement icons within Textfield components using Material-UI and TypeScript in React

I have successfully created a form with validation using TypeScript Material UI and Formik. Now, I am looking to enhance the visual appeal by adding a material UI Icon within the textfield area. Below is a snippet of my code: import React from 'reac ...

cssreactjstypescriptmaterial-uiformik

What is the process for including a new column in a table created using the FixedTable jQuery plugin?

I'm a beginner with the jQuery FixedTable extension. How can I insert a new row into a table that already exists? I need guidance on how to accomplish this task. ...

jqueryhtmljquery-plugins

What is the best way to ensure jQuery runs as soon as the page loads?

In my current jQuery script, I have implemented a feature that checks for content in two input fields (a login page with username and password) and adds the class "used" if there is content present. $(window, document, undefined).ready(function() { $(&a ...

jqueryhtml

The paragraph tag remains unchanged

I am currently working on developing a feature that saves high scores using local storage. The project I'm working on is a quiz application which displays the top 5 scores at the end, regardless of whether the quiz was completed or not. However, I&apo ...

javascriptjqueryhtmlcssajax

How to manipulate wrapping behavior in flexbox

My flex container holds three divs, arranged in two rows: First row: One div with a fixed width Another div that should stretch to fill the remaining space Second row: Just one item However, the first div stretches to 100% width and pushes the seco ...

htmlcssflexbox

Design a custom cover page before printing using the window.print() method

When it comes to printing, I have a header and footer displayed on each page. However, I want the first page to be clean with just a picture or title, without the header and footer that appear on subsequent pages. I've attempted to use CSS like this ...

htmlcss

Scripted AngularJS directive

Essentially, the directive I have defined as sample.js is: app.directive('myDirective', function() { return { restrict: 'E', scope: { info: '=' }, templateUrl: 'link-to-sam ...

javascriptjqueryhtmlangularjs

Anchor links are functioning properly in browsers, yet they do not seem to work in HTML emails sent through Outlook

I am currently dealing with an HTML email that was generated from a Windows application. The template used for this email is designed in a .aspx page. One issue I have encountered is that the links at the top of the email, meant to take the user to a detai ...

htmloutlook

The HTML attribute "hasbox" specifies the presence of a box within the element

I am currently working on resolving some rendering issues specifically in IE9 and have encountered a tag attribute that I am not familiar with - hasbox. Upon further investigation, it seems like IE is injecting this attribute at runtime as it does not app ...

javascripthtmlcss

jQuery slideToggle effect causes neighboring elements to move

After clicking on the element I've set as the trigger for slideToggle, it moves a few pixels to the right without any apparent cause. It seems like there might be an issue with the CSS, but I'm having trouble pinpointing the exact problem. You c ...

jquerycss

Tips on hiding specific table rows in two separate tables based on the chosen option from a dropdown menu

How do I hide table rows based on dropdown selection? The first table has a dropdown with two options: Current State and Future State. If I select Current State, I want to show or hide specific rows in the 2nd and 3rd tables. I am using IDs for these row ...

javascriptjqueryhtml

Transition smoothly between images using CSS in a continuous loop

Is it possible to create a looped fade effect between images using only CSS, without the use of JavaScript? I attempted to achieve this by utilizing keyframes but was unable to succeed. Any guidance or assistance would be greatly appreciated. Thank you! ...

cssfadekeyframe

Which HTML element does each script correspond to?

Are there any methods to identify the script used in certain HTML elements? For instance, if I wish to determine the script responsible for creating a drop-down menu, I can locate the HTML and CSS for the menu but not the JavaScript (or other scripts). I ...

javascriptjqueryhtmlcss