:not() selector not selecting element - css

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>