Geek Answers Handbook

: not () selector does not select an element

I have the following line and I want to ignore only the strong tag from the line using the css selector:

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

I tried the following syntax but it does not work.

p:not(strong)

Where am I mistaken?

+4
source share
3 answers

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

, <p> <strong>, , CSS (. "Is CSS?" )

( ) <p> :

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

:

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>
Hide result

, data-*:

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

:

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>
Hide result

, <p>, <strong>, :

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

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

:

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>
Hide result

, , <strong> ( ):

/* 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>
Hide result

CSS-:

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>
Hide result

:

+5

, :not() . , .

p, strong span, p, strong,

p :not(strong) {
  color: blue;
}
<p><strong>Local:</strong><br>
<span>-Brasília/DF </span></p>
Hide result

- p, strong .

p {
  color: blue;
}
p strong {
  color: black;
}
<p><strong>Local:</strong>
  <br>-Brasília/DF</p>
Hide result
+3

, , CSS. :

.just_this :not(strong){
  color:blue;
  }
<p class="just_this">
  <strong>Local:</strong>
  <br /><span>-Brasília/DF</span>
</p>
Hide result

( ' > '):

.just_this{
  color:blue;
}

.just_this>strong{
  color:black;  
}
<p class="just_this">
  <strong>Local:</strong>
  <br />-Brasília/DF
</p>
Hide result
0

More articles:


All Articles