CSS Selector When :Target Empty

CSS selector when :target empty

Sigh. I feel like I'm resurrecting a dead topic, but it needs a real answer.

It's possible to do this with CSS alone, just by using :last-child and a general sibling combinator, in the form of :target ~ :last-child:

.pages > .page:target ~ .page:last-child,
.pages > .page {
    display: none;
}

/* :last-child works, but .page:last-child will not */
.pages > :last-child,
.pages > .page:target {
    display: block;
}

The rules applies in the following steps:

1. hide all pages
2. show both targeted page and the last page
3. if a page is targeted, hide the last page (.page:target ~ .page:last-child)

(live example)

Edit: Apparently this is very similar to the accepted answer in an older, previously mentioned, related post.

How to create css selector that target element with attr that not empty

button[data-state]:not([data-state=""]) {

  background-color: red;

}

<button id=1 class=notify data-state> some text </button>

<button id=2 class=notify data-state="downloading"> some text </button>

<button id=3 class=notify data-state="render"> some text </button>

CSS Selector for element after empty line

Note: I generally do not support javascript solutions to CSS questions. However, a pure CSS solution would probably require a relational pseudo class. Currently (as per january 2018) :has() is a part of the CSS Selectors Level 4 Working Draft, but unfortunately it's not (yet?) supported by any browsers.

---

What you are asking can be achieved with a combination of javascript and CSS. You may use javascript to find paragraphs that contain only linebreaks, and then add a class to these paragraphs (e.g. a class named linebreak). Then use CSS to style the paragraphs immediately following the ones containing line breaks using the CSS adjacent sibling selector (+).

// Find all <br> elements that are children of a <p> element

for(let br of document.querySelectorAll('p > br')) {

  

  // Climb one level up the DOM to select the parent <p>

  let p = br.parentNode

  

  // Use regex to check if the <p> contains only linebreaks

  if( p.innerHTML.match(/^(<br\s?\/?>)+$/gi)) {

  

    // If so, add the class 'linebreak'

    p.classList.add('linebreak')

  }

}

/* Select the <p> following the one containing linebreaks */

p.linebreak + p {

  color: red

}

<p>Paragraph</p>

<p>Paragraph</p>

<p><br></p>

<p>Paragraph after linebreak (Should be red)</p>

<p>Paragraph</p>

<p><br><br></p>

<p>Paragraph after double linebreak (Should be red)</p>

<p>Paragraph</p>

<p>Paragraph</p>

CSS selector for empty or whitespace

Lots of people missing the point of this question, which I've addressed in the following exposition, but for those just looking for the answer, I'm mirroring the last paragraph here:

Selectors 4 now redefines :empty to include elements that contain only whitespace. This was originally proposed as a separate pseudo-class :blank but was recently retconned into :empty after it was determined that it was safe to do so without too many sites depending on the original behavior. Browsers will need to update their implementations of :empty in order to conform to Selectors 4. If you need to support older browsers, you will have to go through the hassle of marking elements containing only whitespace or pruning the whitespace before or after the fact.

---

While the question depicts a <p> element containing a handful of regular space characters, which seems like an oversight, it is far more common to see markup where elements contain only whitespace in the form of indentation and blank lines, such as:

<ul class="items">
  <li class="item">
    <div>
      <!-- Some complex structure of elements -->
    </div>
  </li>
  <li class="item">
  </li> <!-- Empty, except for a single line break and
             indentation preceding the end tag -->
</ul>

Some elements, like <li> in the above example as well as <p>, have optional end tags, which can cause unintended side effects in DOM processing as well in the presence of inter-element whitespace. For example, the following two <ul> elements don't produce equivalent node trees, in particular the first one does not result in a li:empty in Selectors level 3:

li:empty::before { content: '(empty)'; font-style: italic; color: #999; }

<ul>

  <li>

</ul>

<ul>

  <li></li>

</ul>

CSS selector for element that has content but no class

As has been pointed out,

1. p:not([class]):not(:empty) is correct.
2. However, your p element will match :not(:empty) if it contains whitespace, or any other element, including br.

If your rich text control enforces the leading p element, you may need to target that p separately with a different selector (one that's aware of your rich text control, at least), irrespective of the fact that it contains that wayward br.

Select an element with empty class attribute (class=) using CSS?

You can use element-attribute selector here with an empty class value

div[class=""] {
    color: red;
}

Demo

Note: You can replace the div with required element

:empty doesn't work if there's blank spaces?

As the others mentioned, this isn't possible with CSS yet.
You can check to see if there's only whitespace with JavaScript however. Here's a simple JS only solution, "empty" divs that match are blue, while divs that have text are red. Updated to add an empty class to the empty divs, which would allow you to target them easily with the selector .empty in your CSS.

The JS only "empty" comparison would look like this:

if(element.innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "")

And if you're using jQuery it would be a bit easier:

if( $.trim( $(element).text() ) == "" ){

var navs = document.querySelectorAll(".nav-previous");

for( i=0; i < navs.length; i++ ){

  if(navs[i].innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "") {

    navs[i].style.background = 'blue';

    navs[i].classList.add( 'empty' );

  } else {

    navs[i].style.background = 'red';

  }

}

.nav-previous {

 padding: 10px;

 border: 1px solid #000;

}

.nav-previous.empty {

  border: 5px solid green;

}

<div class="nav-previous">

                            </div>

<div class="nav-previous">Not Empty </div>

CSS/HTML: ul:empty selector won't match an empty list

According to MDN

The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered.

Your "empty" ul probably contains a whitespace text-node.

---

Related Topics