:not() selector not selecting element

Question

I have the following string and I want to ignore just strong tag from the string using css selector:

<p><strong>Local:</strong><br>
-Brasília/DF </p>

I tried the following syntax but it doesn't work.

p:not(strong)

Where am I wrong?

Answer 1

A pseudo-class, attached to an element p:not(strong), selects from those elements to which it is 'attached' (here the p); and a <p> element is always not a <strong> element; therefore this selector will always match every <p> element.

You seem to be trying to style the parent <p> element based on its child <strong> element which cannot work, as CSS has no parent-selector (see: "Is there a CSS parent selector?")

You could, instead, add a class (or other attribute) to the <p> element, and use that in the selector:

<p class="hasStrongDescendant"><strong><strong>Local:</strong><br>
-Brasília/DF </p>

And style with:

p:not(.hasStrongDescendant) {
    /* CSS here */
}

p:not(.hasStrongDescendant) {
  color: orange;
}

<p>A paragraph with no child elements</p>

<p class="hasStrongDescendant"><strong>Local:</strong>
  <br>-Brasília/DF</p>

Or, using a data-* attribute:

<p data-hasChild="strong"><strong>Local:</strong><br>
-Brasília/DF </p>

And style with:

p:not([data-hasChild="strong"]) {
    /* CSS here */
}

p:not([data-hasChild="strong"]) {
  color: #f90;
}

<p>A paragraph with no child elements</p>

<p data-hasChild="strong"><strong>Local:</strong>
  <br>-Brasília/DF</p>

Also, if you wrapped the contents of the <p>, following the <strong>, inside their own element you could style the descendants of the paragraph using the negation selector:

<p>A paragraph with no child elements</p>

<p><strong>Local:</strong>
  <br><span>-Brasília/DF</span>
</p>

Styling with:

p :not(strong) {
  /* note the space between the
     'p' and the ':not()' */
  color: #f90;
}

p :not(strong) {
  color: #f90;
}

<p>A paragraph with no child elements</p>

<p><strong>Local:</strong>
  <br><span>-Brasília/DF</span>
</p>

Two further approaches, assuming that you want to style the text of the child outside of the <strong> element is (the simplest):

/* define a colour for the <p>
   elements: */
p {
  color: #f90;
}

/* define a colour for the <strong>
   elements within <p> elements: */    
p strong {
  color: #000;
}

p {
  color: #f90;
}
p strong {
  color: #000;
}

<p>A paragraph with no child elements</p>

<p><strong>Local:</strong>
  <br>-Brasília/DF</p>

And a slightly more complex version, using CSS generated content:

p {
  color: #f90;
}
p[data-label]::before {
  content: attr(data-label) ': ';
  color: #000;
  display: block;
  font-weight: bold;
}

<p data-label="Local">-Brasília/DF</p>

References:

• CSS negation pseudo-class (:not()).

Answer 2

That is not how :not() pseudo-class works. It matches an element that is not represented by the argument.

So in this case to select text of p but not the strong tag you can wrap other part of text in span and then select all children of p but not strong like this

p :not(strong) {
  color: blue;
}

<p><strong>Local:</strong><br>
<span>-Brasília/DF </span></p>

Other option is to simply select text of p and then overwrite strong tag with default style.

p {
  color: blue;
}
p strong {
  color: black;
}

<p><strong>Local:</strong>
  <br>-Brasília/DF</p>

Answer 3

Anything but the strong tag will use CSS. Like:

.just_this :not(strong){
  color:blue;
  }

<p class="just_this">
  <strong>Local:</strong>
  <br /><span>-Brasília/DF</span>
</p>

Alternative(just use the child-combinator '>'):

.just_this{
  color:blue;
}

.just_this>strong{
  color:black;  
}

<p class="just_this">
  <strong>Local:</strong>
  <br />-Brasília/DF
</p>