I have question how work first-child and last-child with elements and classes?
Look on my example
And for it I have some question:
Why this rule not working:
p.test1:first-child{
color: green;
}
How then change color of first element with class test1?
Why this rule working if is similar to example 1:
p.test1:last-child{
color: white;
}
The :first-child CSS pseudo-class represents any element that is the
first child element of its parent.
The :last-child CSS pseudo-class represents any element that is the
last child element of its parent.
References:
http://developer.mozilla.org/en-US/docs/CSS/:first-child
http://developer.mozilla.org/en-US/docs/CSS/:last-child
1- In your example p.test1 is not a first child element of its parent, so the selector doesn't select any element.
2- .test1:nth-of-type(4) Update, replaced 4 instead of 1, not quiet a solution, Ref:http://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo
3- Because it is the last child element of its parent.
Note: the parent here in your example is the body tag.
Example in question for future reference:
<p>test</p>
<p>test</p>
<p>test</p>
<p class="test1">test</p>
<p class="test1">test</p>
<p class="test1">test</p>
<p class="test1">test</p>
The first-child/last-child is in relation to the parent element. In your example there is no p.test-element that is the first child of its parent element (The JsFiddle container). Instead the first-child is a plain p-element. If you set the .test-class on the first p-element it turns green.
Related
This question already has answers here:
CSS selector for first element with class
(23 answers)
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed last month.
I'm trying to use the contains selector in css and the first child selector together and can't get it to work. It works without the :first-child selector which makes me think maybe its just not possible? For my example below I only want the first p with the id of taco to have a background-color of yellow.
<!DOCTYPE html>
<html>
<head>
<style>
p[id*="taco"]:first-child {
background-color: yellow;
}
</style>
</head>
<body>
<p>This paragraph is the first child of its parent (body).</p>
<p>This paragraph is not the first child of its parent (body).</p>
<p>This paragraph is the first child of its parent (div).</p>
<p>This paragraph is not the first child of its parent (div).</p>
<p id="taco">This paragraph is the first child of its parent (body).</p>
<p id="taco">This paragraph is not the first child of its parent (body).</p>
<p id="taco">This paragraph is the first child of its parent (div).</p>
<p id="taco">This paragraph is not the first child of its parent (div).</p>
</body>
</html>
I tried to use both selectors. I tried using the first child without the contains selector and it worked. I also tried to use the contains selector without the first child selector and that works but using them together doesn't.
It actually does work.
What it does is just not what you would expect. CSS is looking for an element which is both :first-child and [id*="taco"].
You don't have any first-child containing taco in the id.
<p>This paragraph is the first child of its parent (body).</p>
doesn't contain taco in the id.
Not sure what exactly you are trying to do but I guess you rather wanna get the first element with a certain id than the :first-child. Id's however should remain unique so I would recommend using a class instead.
Therefore you look for something like the :first-of-type pseudo selector, though this answer explains why it might also not work as you would expect with other parameters. I hope this does actually help you find a solution for your main problem.
You'll need two rules.
The first targets the element to modify.
The second keeps the following elements unchanged.
p.taco {
background-color: yellow;
}
p.taco ~ p {
background-color: white;
}
<p>This paragraph is the first child of its parent (body).</p>
<p>This paragraph is not the first child of its parent (body).</p>
<p>This paragraph is the first child of its parent (div).</p>
<p>This paragraph is not the first child of its parent (div).</p>
<p class="taco">This paragraph is the first child of its parent (body).</p>
<p class="taco">This paragraph is not the first child of its parent (body).</p>
<p class="taco">This paragraph is the first child of its parent (div).</p>
<p class="taco">This paragraph is not the first child of its parent (div).</p>
<!DOCTYPE html>
<html>
<head>
<style>
p:last-child
{
background:#ff0000;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>
</html>
Question:
If i change
p:last-child
{
background:#ff0000;
}
to
:last-child
{
background:#ff0000;
}
then the whole page became red. why? what is the difference between p:last-child and :last-child?
p:last-child will select a p element if it's a last-child, if you've any other element as your last-child it will fail
Demo
In this case, you should use a more stricter pseudo like
p:last-of-type {
background:#ff0000;
}
Demo 2
The above will select p element, which is last regardless of any other element which can be last-child of the parent element.
Coming to this selector, :last-child, is not specific at all, you haven't specified last-child of what? So it will select any parent elements last-child
So
:last-child {
background:#ff0000;
}
Will select i and body element but NOT p as it's not the last-child of body, same way if you use :last-of-type it will select
i body as well as p because now we are using last-of-type so it selects last element of each distinct element.
Demo
You can use firebug to inspect each element and see how the elements pick up these properties.
Since the :last-child selector selects all elements that are the last child of their parent.
By default all elements selected it, the first one is to specify the p element. [Google Translation]
p:last-child works by applying the CSS property to only the last child of a paragraph element.
:last-child works by applying the CSS property to the last child of the parent element. In this case, the last child would always be the body, since we always have one body, right? :)
This question already has answers here:
CSS Child vs Descendant selectors
(8 answers)
Closed 8 years ago.
I am looking at some css code and i do not understand this line. The code has a div called shape which contains six other divs each containing an image.
which images does the following code select? As i said the div shape contains six others divs, so why does the code below select only one image?
#shape > div{
}
Actually A > B is a specialization of the more generic A B:
A B will apply to any element B being somewhere inside an element A.
A > B will only apply to elements B who are direct children of an element A.
Simple example:
CSS
.a .b {
color: red;
}
.a > .b {
color: blue;
}
HTML
<div class="a">
<div class="b">Hello</div>
<div class="c">
<div class="b">World!</div>
</div>
</div>
You can try this example right here at jsFiddle.
As you can see, the blue color isn't applied to the second instance of an element with the class b, because it's no direct child; only a descendant. Otherwise both elements would be blue, due to the second definition (.a > .b) following later.
This selects any DIV that is a child of the element with the ID shape.
this applies the styles to divs which are direct children of element with id #shape
Demo: Fiddle
in the demo the style is not applied to section > div because the container div is not a direct child of #shape
> is the child combinator, also known as the direct descendant combinator.
That means the selector #shape > div only selects divs that sit directly inside a tag with ID #shape
Demo : http://jsfiddle.net/JDs9G/
I have the following set up
.test div:first-child {};
<div class="test" id="one">
<div id="two">
<div id="three">
</div>
</div>
</div>
Somehow div#three inherits the first-child styles, even though it is not the first-child of div.test. Is this intentional by the browsers? Can someone explain this?
While #two is the first child of #one but #three isn't, #three is still the first child of #two. So both inner divs get the styles.
The descendant combinator (the space character) in your selector tells the browser to select any div in any level of nesting from .test, as long as it's contained somewhere within an element with that class. The :first-child pseudo-class says to only select an element if it's the first child of its parent, whatever that parent may be, not just the element represented on the left side of the combinator.
If you only want to target the first child of .test, use the child combinator >:
.test > div:first-child {}
Because > expresses a parent-child relationship, it is safe to imply that the parent concerned by div:first-child is represented by .test.
This is the intended behaviour. You need to write your CSS rule like this:
.test > div:first-child
The > ensures only the first child of the .test element is selected. Without it, any div that is the first child of any node within .test is selected.
I am a bit confused between these 2 selectors.
Does the descendent selector:
div p
select all p within a div whether or not it's an immediate descedent? So if the p is inside another div it will still be selected?
Then the child selector:
div > p
Whats the difference? Does a child mean immediate child? Eg.
<div><p>
vs
<div><div><p>
will both be selected, or not?
Just think of what the words "child" and "descendant" mean in English:
My daughter is both my child and my descendant
My granddaughter is not my child, but she is my descendant.
Yes, you are correct. div p will match the following example, but div > p will not.
<div><table><tr><td><p> <!...
The first one is called descendant selector and the second one is called child selector.
Bascailly, "a b" selects all b's inside a, while "a>b" selects b's what are only children to the a, it will not select b what is child of b what is child of a.
This example illustrates the difference:
div span{background:red}
div>span{background:green}
<div><span>abc</span><span>def<span>ghi</span></span></div>
Background color of abc and def will be green, but ghi will have red background color.
IMPORTANT: If you change order of the rules to:
div>span{background:green}
div span{background:red}
All letters will have red background, because descendant selector selects child's too.
In theory:
Child => an immediate descendant of an ancestor (e.g. Joe and his father)
Descendant => any element that is descended from a particular ancestor (e.g. Joe and his great-great-grand-father)
In practice: try this HTML:
<div class="one">
<span>Span 1.
<span>Span 2.</span>
</span>
</div>
<div class="two">
<span>Span 1.
<span>Span 2.</span>
</span>
</div>
with this CSS:
span { color: red; }
div.one span { color: blue; }
div.two > span { color: green; }
http://jsfiddle.net/X343c/1/
Be aware that the child selector is not supported in Internet Explorer 6.
(If you use the selector in a jQuery/Prototype/YUI etc selector rather than in a style sheet it still works though)
div p
Selects all 'p' elements where at least one parent, grandparent etc. is a 'div' element
div > p
It means immediate children
Selects all 'p' elements where the parent is a 'div' element
div > p matches ps that have a div parent - <div><p> in your question
div p matches ps that have a div ancestor (parent, grandparent, great grandparent, etc.) - <div><p> and <div><div><p> in your question
CSS selection and applying style to a particular element can be done through traversing through the dom element
[Example
Example
.a .b .c .d{
background: #bdbdbd;
}
div>div>div>div:last-child{
background: red;
}
<div class='a'>The first paragraph.
<div class='b'>The second paragraph.
<div class='c'>The third paragraph.
<div class='d'>The fourth paragraph.</div>
<div class='e'>The fourth paragraph.</div>
</div>
</div>
</div>