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>
Related
For example:
div > p.some_class {
/* Some declarations */
}
What exactly does the > sign mean?
> is the child combinator, sometimes mistakenly called the direct descendant combinator.1
That means the selector div > p.some_class only matches paragraphs of .some_class that are nested directly inside a div, and not any paragraphs that are nested further within. This implies that every element matching div > p.some_class necessarily also matches div p.some_class, with the descendant combinator (space), so the two are understandably often confused.
An illustration comparing the child combinator with the descendant combinator:
div > p.some_class {
background: yellow;
}
div p.some_class {
color: red;
}
<div>
<p class="some_class">Some text here</p> <!-- [1] div > p.some_class, div p.some_class -->
<blockquote>
<p class="some_class">More text here</p> <!-- [2] div p.some_class -->
</blockquote>
</div>
Which elements are matched by which selectors?
Matched by both div > p.some_class and div p.some_class
This p.some_class is located directly inside the div, hence a parent-child relationship is established between both elements. Since "child" is a type of "descendant", any child element is by definition also a descendant. Therefore, both rules are applied.
Matched by only div p.some_class
This p.some_class is contained by a blockquote within the div, rather than the div itself. Although this p.some_class is a descendant of the div, it's not a child; it's a grandchild. Therefore, only the rule with the descendant combinator in its selector is applied.
1 Many people go further to call it "direct child" or "immediate child", but that's completely unnecessary (and incredibly annoying to me), because a child element is immediate by definition anyway, so they mean the exact same thing. There's no such thing as an "indirect child".
> (greater-than sign) is a CSS Combinator.
A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS3:
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
Note: < is not valid in CSS selectors.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
Output:
More information about CSS Combinators
As others mention, it's a child selector. Here's the appropriate link.
http://www.w3.org/TR/CSS2/selector.html#child-selectors
It matches p elements with class some_class that are directly under a div.
All p tags with class some_class which are direct children of a div tag.
( child selector) was introduced in css2.
div p{ } select all p elements decedent of div elements, whereas div > p selects only child p elements, not grand child, great grand child on so on.
<style>
div p{ color:red } /* match both p*/
div > p{ color:blue } /* match only first p*/
</style>
<div>
<p>para tag, child and decedent of p.</p>
<ul>
<li>
<p>para inside list. </p>
</li>
</ul>
</div>
For more information on CSS Ce[lectors and their use, check my blog,
css selectors and css3 selectors
html
<div>
<p class="some_class">lohrem text (it will be of red color )</p>
<div>
<p class="some_class">lohrem text (it will NOT be of red color)</p>
</div>
<p class="some_class">lohrem text (it will be of red color )</p>
</div>
css
div > p.some_class{
color:red;
}
All the direct children that are <p> with .some_class would get the style applied to them.
The greater sign ( > ) selector in CSS means that the selector on the right is a direct descendant / child of whatever is on the left.
An example:
article > p { }
Means only style a paragraph that comes after an article.
Hi I have a scenario where I have to style a h3 element based on parent div class
Example:
<div class="First">
<p>This is sample text</p>
</div>
<div class="Second">
<h3>This is sample header</h3>
</div>
Now what I want to do is if there is a p tag inside class named First, I want to change the style of h3 tag of second class.
Answer: Without altering the HTML, this is currently not possible with CSS alone.
Further information: The CSS Selectors Level 4 specs introduce(d) the new parent selector $:
$div > p {
// styles here
}
The selector above would target the div, not the p. Of course, only divs, which have a direct p child element. Still, this wouldn't help much with further additions and as BoltClock noted, the specs haven't been revised for a couple of years and a parent selector might not even come soon.
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 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.
Why first paragraph not taking this style p:first-child
#content p:first-child {color:#4C4C4C;
font-size:1.2em;
font-weight:bold;
line-height:1.8;
margin-bottom:0.5em;}
<div id="content">
<h1>Welcome</h1>
<p>first paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>
</div>
How to select first paragraph from css?
You're looking for the :first-of-type psuedo selector!
So, you'd do this to get that first paragraph:
#content p:first-of-type
While the previous answers have already defined the problem (that the p isn't the first child of the parent div), here's a solution to your problem, to target the first p that follows a h1, depending on your browser:
h1 + p { /* styles any paragraph that immediately follows a h1 element */ }
The selector matches any p element which is the first child of its parent.
In this case the p is the second child of its parent.
Have a look at: http://www.w3schools.com/CSS/css_pseudo_classes.asp
the content of P isn't its first child - from what I've seen a tag such as or would be the first child not the actual content.
Could always just assign a class to every first paragraph - full proof.
p.indent{
text-indent:50px;
}