Having issues with ::before pseudo-element, how can I style it differently based on the content of the <div>?

Assuming the following HTML elements:

<p>Paragraph.</p>
<div class="note">Naked Note Div.</div>
<div class="note">
  <p>Paragraph in Note DIV.</p>
  <p>Second Paragraph in Note DIV.</p>
</div>
<div>NON Note Naked Div.</div>
<div>
  <p>Paragraph in NON None DIV.</p>
</div>

The desired output should be as follows:

 Paragraph.
 NOTE: Naked Note Div.
 NOTE: Paragraph in Note DIV.
 Second Paragraph in Note DIV.
 NON Note Naked Div.
 Paragraph in NON None DIV.

Attempting to achieve this using CSS pseudo class ::before has proven challenging, especially for someone new to this concept.

Using: CSS 

.note::before {content: "NOTE: ";}
yields:

 Paragraph.
 NOTE: Naked Note Div.
 NOTE:
 Paragraph in Note DIV.
 Second Paragraph in Note DIV.

When applying CSS 

.note :first-child::before {content: "NOTE: ";}
, the result is:

 Paragraph.
 Naked Note Div.
 NOTE: Paragraph in Note DIV.
 Second Paragraph in Note DIV.

Is there a way to resolve this using only CSS without resorting to preprocessors or jQuery?

csscss-selectorspseudo-class

Answer №1

One possible solution is to utilize the :has() selector

.note:not(:has(*)):before, /* target note element when it has no children */
.note:has(*) :first-child:before { /* target first child of note element */
  content:"Note: ";
  color: red;
}
<p>Paragraph.</p>
<div class="note">Naked Note Div.</div>
<div class="note">
  <p>Paragraph in Note DIV.</p>
  <p>Second Paragraph in Note DIV.</p>
</div>
<div>NON Note Naked Div.</div>
<div>
  <p>Paragraph in NON None DIV.</p>
</div>

Another workaround until improved support for :has() is to use float:

.note::before { 
  content:"Note:";
  color: red;
  float: left;
  margin-right: 10px;
}
<p>Paragraph.</p>
<div class="note">Naked Note Div.</div>
<div class="note">
  <p>Paragraph in Note DIV.</p>
  <p>Second Paragraph in Note DIV.</p>
</div>
<div>NON Note Naked Div.</div>
<div>
  <p>Paragraph in NON None DIV.</p>
</div>

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

Toggling the `toggleClass` on a fixed element when clicking a link (such as in an off canvas menu) can

As per the following markup code, there is a sticky navigation bar (menu-bar) that reveals an off-canvas menu using CSS transitions when the button is clicked by adding a class (slide-wrapper__open) to the HTML element. HTML <div class="menu-bar"& ...

jqueryhtmlcss

Tips for maintaining a seamless look with image wrapping on a single line

I'm having an issue with my code – the image is appearing below the input box instead of beside it. Can anyone spot the mistake? <input type="text" name="test" /> <div style="float:left"><img src="test.jpg" /></div> ...

css

Extracting Hyperlinks - Obtaining the URL paths

On each row of this webpage, you will find a link titled "View Posters" which contains a specific URL. I successfully extracted the first URL in my code as "ur". However, I am currently unsure of how to extract the view poster URL. rom selenium import we ...

pythonseleniumweb-scrapingbeautifulsoupcss-selectors

There is excessive space beneath the text

I am struggling with aligning text vertically to match the chevrons. I have attempted various CSS properties like removing paddings/margins, setting line-height to 1, using text-decoration: none, text-align: center, and vertical-align: middle on my <p&g ...

css

Emphasize the CSS property and give it top priority

I am struggling with setting the highest priority for the background of the <h1> element. Specifically, I want the background color specified for the <h1> to show instead of what is specified for the <a> element. h1{ background-color:b ...

htmlcss

Can the size of a linear gradient be predetermined in CSS?

When working with CSS, it's possible to set various properties of a linear gradient such as color, position, orientation, and width. However, is it feasible to define its length? I prefer not to use SVG and am specifically looking for a CSS-based solu ...

htmlcss

What could be causing the distance between the image and the navigation bar?

Hey there, I'm struggling with a pesky little gap that's sneaking in between an image and my navigation bar. I've exhausted all my usual tricks like setting inline-blocks on the ul and li levels, and trying to align everything left with text ...

htmlcss

Unable to access the website's source code

It's frustrating when I can't view the source code of certain websites, such as this one: . When I try to right-click and select "View Source", only a portion of the code is displayed, which isn't the proper source code for the page. Alth ...

javascripthtmlcssinspect

text shaped into a curve within a container

$().ready(function() { $('#demo1').circleType({fitText:true, radius: 180}); }); $().ready(function() { $('#example').arctext({radius: 250}); }); <script type="text/javascript" src="http://ajax.googleapis.com/ ...

javascriptjquerycss

the display:block property totally ruins my aesthetic

I'm facing an issue with filtering a table using an input box within one of the elements. Whenever I type something in the input box, the table automatically filters its rows based on the input. The strange thing is that when I try to use display:bl ...

jqueryhtmlcss

How can I achieve both horizontal and vertical centering simultaneously?

UPDATE: Seeking advice on aligning a rangeslider and its label vertically within the same row. The goal is to have them centered with respect to each other while ensuring the rangeslider takes up all available space. How can I vertically center a floatin ...

javascriptjqueryhtmlcssjquery-mobile

I seem to be experiencing difficulties with my dropdown menu as it is not

Having trouble creating a dropdown menu in HTML and CSS? If the subset of items in the parent items <ul> tags is not displaying properly on hover, you're not alone. The child items may be invisible or displayed incorrectly across the page. Chec ...

htmlcss

Arranging divs for dynamic movement with window resizing

Seeking a solution to have words on my background image function as links, I planned to place transparent divs over the words in the background. However, struggling with positioning these divs accurately as the window is resized. Code Snippet: <div id ...

htmlcss

Eliminate billing information from the Woocommerce order management page on the backend

Is there a way to modify the text "Paid on" in the backend order details page of WooCommerce? I have already implemented this for BACS and local pickup payment methods. Replace a specific word for BACS payment method in Woocommerce order edit pages I am ...

csswordpresswoocommerceorderswoocommerce-theming

What is the process for setting up a banner on one page that will automatically be reflected on all other pages?

Is there a way to have a banner in a div and display it on the home page so that it automatically appears on all other pages without needing to place the code on each page individually? Any assistance would be greatly appreciated :) ...

javascriptphphtmlcss

I'm having trouble getting the float left to work properly in my HTML/CSS code

Currently, I am diving into the world of HTML / CSS on my own. After following some tutorials, I have taken the leap to work on my very first project. My goal is to layout three images and three text elements on a single page using CSS. The desired struct ...

htmlcss

Changing the entire content of a webpage from the server using AJAX

I am looking to update the entire page content with the click of a button, transitioning from Words.html to SelectNumber.html This snippet is from Words.html <html> <head> <meta charset="UTF-8"> <title>Number Game< ...

javascripthtmljquerycssajax

Struggles with Aligning CSS Layout

I'm encountering some challenges with the layout of my webpage, particularly with alignment. Here are the issues I'm facing: The login section doesn't fit well in the header and lacks proper alignment. I aim to replicate the design from ...

htmlcss

The fixed background-attachment feature does not function properly in Chrome when it is contained within a scrolling div

Essentially, if a background image is placed within a scrolling div, it will no longer remain fixed and will revert back to scrolling: CSS: <div class="wrapper"> <span></span> </div> HTML: html, body{ width: 100%; height: ...

cssgoogle-chromebackground-imagebackground-position

Implementing CSS Stylesheet in Javascript for altering .innerHTML

Suppose I have a JavaScript function that displays an error using the following code document.getElementById("ID").innerHTML = "This is your error"; Now, if I wish to customize the error message by changing its text color and repositioning it on the page ...

javascripthtmlcssjsp