This question already has answers here:
CSS :not pseudo-class applying broadly and not targeting specific element
(4 answers)
Closed 4 years ago.
I was looking at this CSS example from the Mozilla page for the :not() selector.
The example is:
p:not(.classy) { color: red; }
:not(p) { color: green; }
<p>Irgendein Text.</p>
<p class="classy">Irgendein anderer Text.</p>
<span>Noch mehr Text<span>
What I totally understand:
I get why the first p element is red, it's because it is a p element and it does not have the class 'classy'.
I also get why the span element is green, it's because it's selected by the :not(p), it is not a p element
But why is the second p element green? It would not be selected by the first selector, because it is a p element without the class classy. But it would not be selected by the second one, because it is a p element. So why is it green?
The second p isn't :not(.classy) so it isn't color: red. This means it still has its default colour, which is color: inherit.
The body element is :not(p) so it is color: green.
The second p therefore inherits the green colour from the body element.
The developer tools in your browser would have told you this:
In Addition to #Quentin answer, for your understand try to add your elements under one parent and apply the CSS with parent selector reference. Now you will get exactly what you expected. Look at the below snippet.
.test p:not(.classy) { color: red; }
.test :not(p) { color: green; }
<div class="test">
<p>Irgendein Text.</p>
<p class="classy">Irgendein anderer Text.</p>
<span>Noch mehr Text</span>
</div>
So in your case the parent element is body and inherited the color from there like the above answer.
Related
For some reason, a black background shows up out of nowhere on the p tags under the div when you put the CSS selector to #div1. If I fix it and change the selector from #div1 to #div1 > h4 like my little tutorial text was explaining, it fixes itself. Why is that? I just need to know if it's a glitch or not. Thanks!
Please advise. Thanks.
body {
}
h2 {
color: red;
}
p {
color: pink;
}
p {
color: green;
}
p {
color: purple;
}
.orange > p {
color:orange;
}
.blue {
color: blue;
}
#red {
color: red;
}
#div1 > h4 {
background-color: black;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>CSS Basics</title>
<link rel="stylesheet" type="text/css" href="basics.css">
</head>
<body>
<p>This is the color purple not pink or green because CSS always takes the selector that is last in the cascade.</p>
<div class="orange">
<h1>This will not be orange</h1>
<p>This will be orange because our selector in CSS for the class="orange" is like this: .orange > p making the h1 unchanged even though it is under the same class="orange" and the p will be the only one that changes to orange text!</p>
</div>
<p class="blue">This will be blue.</p>
<p class="blue">This will also be blue, because you can use classes more than once unlike ID's.</p>
<p id="red">This is an ID stating it is red.</p>
<p id="red">This is using the same ID to say it is red, and as you can see it still works. But, be warned, using the same ID to multiple elements is invalid HTML and should be avoided!</p>
<div id="div1">
<p>This paragraph is wrapped in a div with the id of "div1" which gives a black background and white text.</p>
<p>This paragraph is also wrapped in the div with the id of "div1". Notice that neither this paragraph or the paragraph before this one has white text or a black background. This is because we didn't specify in the selector to give p tags white text by using a > symbol between #div1 and p. In fact, it remained purple since that is the last thing applicable that the cascade found to work.</p>
<h4>This h4 text on the other hand (which is also inside of the div as the other two paragraphs above it) works because we specified it to be #div1 > h4 for its selector. (side note: the two paragraphs above this h4 element do in fact get a black background until we write in #div > h4. I do not know why the text remains purple but the background changed to black...It fixed itself to not having a black background after we wrote in the code "#div1 > h4" so idk what to make of it...)
</h4>
</div>
</body>
</html>
#div1 is the parent of the p elements. This means that some properties (such as background) of #div1 will be applied to the child element(s). However, when you add the > h4 it is specifying that those properties should only apply to the h4 child element of #div1 element. So no, it is not a glitch but is intended CSS behavior.
To note, you have 3 distinct p {} statements, each with a different color...only the final one will be used (because they all have the same specificity) and you can delete the top two.
If I'm understanding your question correctly, the reason the black background only applies to the h4 element once you add the angled bracket is because the angled bracket is a CSS child selector.
In this instance, #div1 > h4 applies styling to all h4 that are children of the #div1 div, whereas #div1 itself applies styling to everything contained in the div (including p)
I hope this answers your question my friend.
#div1 is the part element that your p tags contain. since that p tags are inside the div, the back ground color will be black. because it applies its styles to all the child elements.
when you give #div1 > h4 ; this styles only affects on h4 tag since it only applies to #div1 's child h4 elements.
HTML:
<p>I`m p</p>
<a>I`m a</a>
<h2>I`m h2</h2>
CSS:
:not(p){
color:red;}
:not() pseudo class should select all the elements inside the HTML document, that aren`t "p", and give them red color, but when i run the code "p" is red too, just like all other elements.
here you need to specify color for all html elements. as there is no color set to elements, the color from your selector is getting set to all elements available.
Here is what you need to add in your style:
*{
color: black;/* the color you will want for all or p elements. */
}
Notorious Zet you can fix this error by giving the p element a class and then using the not pseudo selector
The HTML
<p class = "notRed"> This is a p element </p>
<h1>This is a h1 element</h1>
The CSS
p:not(notRed){
color: red /*This will apply to all p elements with the class of notRed*/
}
Need to specify the color of <p> tag first. See the example from w3schools.
p {
color: black;
}
:not(p) {
color: red;
}
<p> I am p </p>
I am a
<h1> I am h1 </h1>
This question already has answers here:
Why is a second-child affected by my first-child color property?
(4 answers)
Closed 3 years ago.
Something obvious I may be missing, but I can't figure out why the > selector (which should only select direct children), also styles the nested span #2.
I do get the expected result (only outer span #1 green, span #2 is black) when I add this to the CSS:
span{
color:black;
}
However, I feel it's odd that using just the > selector somehow expands into the nested span, behaving as a space selector targeting all children:
div span{
color:green;
}
Any ideas? (Here's a Codepen I used to fiddle with it)
In short, Inheritance. The style isn't applying directly to the second span. Rather, the second span is "inheriting" its style from the first span.
Look in something like Chrome Dev tools and you'll see this;
Your options here are limited. You could unset any nested spans by resetting them to their initial state;
body{
color: red;
}
div > span{
color: green;
}
div > span > span{
color: initial;
}
<div>
<span>
This is span #1
<span>This is span #2</span>
</span>
</div>
However, this comes with a caveat. This means it won't inherit from anything. Note how it doesn't inherit the red color from the body.
Both of the following codes seem to work properly to style the span element:
<style>
div p span {
font: 18px arial;
color: red;
}
</style>
<div>
<p>
<span>
Hello, world!
</span>
</p>
</div>
<style>
div span {
font: 18px arial;
color: red;
}
</style>
<div>
<p>
<span>
Hello, world!
</span>
</p>
</div>
But I'm not sure if the second one is the right coding and if there's a difference between them, for example regarding browser support.
Neither of them is a “subchild selector”; there is no such concept in CSS. They are different descendant selectors, or descendant combinators as they are called in the Selectors Level 3 specification. Their meanings are different, so it depends on the purpose which one is better.
The selector div span matches any span element that is a descendant of a div element. The selector div p span matches any span element that is a descendant of a p element that is a descendant of a div element. Both selectors are rather theoretical as such; they are hardly useful in practical situations without some additional components such as class selectors.
They both work because the elements selected by div p span are a subset of the ones selected by div span.
If you include a <span> as a child of the <div>, the second one will select it, but the first one will not. If you don't include a <span> as a child of the <div>, they will select exactly the same elements.
For example:
<div>
<span>Only the second selector will make this text red</span>
<p>
<span>Hello, world!</span>
</p>
</div>
Well, it really depends on the context. For example, this selector...
div p span
will only apply to all span elements that are children of a p element which in turn, are children of a div element. Consider, this html...
<div>
<span class="title">Title</span>
<span class="desc">Description</span>
<p>
<span>Content</span>
<p>
</div>
the following css declaration will color the content span in blue
div p span
{
color:Blue;
}
however the style is not applied to the title and the description because they are not children of a p element. Now by using this css declaration...
div span
{
color:Blue;
}
will cause both the title, description and the content to be coloured in blue because this selector targets all span elements that are nested within a div element
As for performance, that's hard to determine because it all depends on implementation and how well different browsers traverse through a DOM hierarchy and apply the style. But, I'd guess that the more specific you can be the better so that the HTML parser can target elements directly. With that in mind, this css selector...
div p span
should perform faster than
div span
because it will cause the rendering engine to look for all div element, then p elements ignoring all other elements (including span elements that are direct children) and finally it'll look for span elements
both of them will work but
div p span {
font: 18px arial;
color: red;
}
is more correct, and you are less likely to have problems like when you decide to add a span in an li for some other possible purpose.
div > p > span {
font: 18px arial;
color: red;
}
First method is correct way.The styles work only span that inside of the p tag and you can give/edit/change specific styles on this item ...but the second method's style work all span inside of div tag..
I have this code.
<div class="myDiv">
<div>
I want to be red.
</div>
</div>
<p>I'm some other content on the page</p>
<div class="myDiv">
<div>
I want to be blue.
</div>
</div>
.myDiv div:nth-child(odd) {
color: red;
}
.myDiv div:nth-child(even) {
color: blue;
}
I see why it's not working. It's making every odd div within myDiv be red. What I want it to do is make every odd example of a div within myDiv be red. How can I write that?
Here's a JSFiddle.
There are a couple of problems here. The :nth-child is on the wrong element. The inner divs are always the first child, so the :nth-child(odd) selector works for both. Instead move to
.myDiv:nth-child(odd) div
...however this does not work either because of the <p>. A working solution with your sample is
.myDiv:nth-of-type(odd) div
http://jsfiddle.net/tvKRL/1/
NOTE that the nth-of-type only works because the .myDiv elements are all divs (it's based on the element, not the selector), so the selector ignores the <p>. If there can be another div between .myDivs I don't think any CSS will work for what you want to do.
You can't do this generically, for the reason given by Domenic. To put it simply: there's no selector that lets you filter an existing subset of matched elements.
On the off chance that among your p and div.myDiv siblings the only div elements are the ones with that class anyway, then you could use :nth-of-type() to have it look at those intermediate divs only:
div.myDiv:nth-of-type(odd) div {
color: red;
}
div.myDiv:nth-of-type(even) div {
color: blue;
}
Or if there are other divs without that class which should be excluded, then unless there is some sort of pattern in which they're laid out, you're out of luck.
This is not possible. There is no CSS selector that will do what you want, as you can see by perusing the complete list of selectors.
In general CSS selectors do not "reach out" to encompass elements above the DOM tree of the one selected. You are asking for something even more sophisticated than that, combining characteristics of parent elements with ordinal properties of the targeted elements, even though those targeted elements are distributed among entirely different places in the DOM tree.
Just applynth-childto the first member of the descendant selector, not the last one.
div:nth-of-type(odd) > div {
color: red;
}
div:nth-of-type(even) > div {
color: blue;
}
<div class="myDiv">
<div>
I want to be red.
</div>
</div>
<p>I'm some other content on the page</p>
<div class="myDiv">
<div>
I want to be blue.
</div>
</div>