Why if I put an element before the "p" lines, I don't see the first line yellow? Should p:first-child select the very first p and not just a very first tag?
<style type="text/css">
p:first-child
{
background:yellow;
}
</style>
<i></i>
<p>I am a strong man. I am a strong man.</p>
<p>I am a strong man. I am a strong man.</p>
<p>I am a strong man. I am a strong man.</p>
:first-child does not care about the type. By adding <i></i> to your code, i becomes the first child (assuming <style> is within <head> and the rest is in <body>, of course). Your selector wants to match p, but since p is not the first child anymore, your style can't be applied.
If you want to filter by type, use the CSS3 :first-of-type pseudo-class:
p:first-of-type
{
background:yellow;
}
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.
I'm trying to select the first h1 inside a div with a class called detail_container. It works if h1 is the first element within this div, but if it comes after this ul it won't work.
<style type="text/css">
.detail_container h1:first-child
{
color:blue;
}
</style>
</head>
<body>
<div class="detail_container">
<ul>
<li></li>
<li></li>
</ul>
<h1>First H1</h1>
<h1>Second H1</h1>
</div>
</body>
</html>
I was under the impression that the CSS I have will select the first h1 no matter where it is in this div. How can I make it work?
The h1:first-child selector means
Select the first child of its parent
if and only if it's an h1 element.
The :first-child of the container here is the ul, and as such cannot satisfy h1:first-child.
There is CSS3's :first-of-type for your case:
.detail_container h1:first-of-type
{
color: blue;
}
But with browser compatibility woes and whatnot, you're better off giving the first h1 a class, then targeting that class:
.detail_container h1.first
{
color: blue;
}
:first-child selects the first h1 if and only if it is the first child of its parent element. In your example, the ul is the first child of the div.
The name of the pseudo-class is somewhat misleading, but it's explained pretty clearly here in the spec.
jQuery's :first selector gives you what you're looking for. You can do this:
$('.detail_container h1:first').css("color", "blue");
For that particular case you can use:
.detail_container > ul + h1{
color: blue;
}
But if you need that same selector on many cases, you should have a class for those, like BoltClock said.
you can also use
.detail_container h1:nth-of-type(1)
By changing the number 1 by any other number you can select any other h1 item.
You could wrap your h1 tags in another div and then the first one would be the first-child. That div doesn't even need styles. It's just a way to segregate those children.
<div class="h1-holder">
<h1>Title 1</h1>
<h1>Title 2</h1>
</div>
<!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? :)
Can somebody please explain what the selectors mean?
As far as I understand having #myId - is css for control with id=myId.
.myClass is Css for controls with class myClass.
Can somebody please explain the other combinations?
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
div.img a:hover img
selects images that are inside hovered links, that are inside div elements with class img, and gives them a blue border.
div.desc
selects divs with the class desc.
An id (#) can exist only once in a document. It is really useful to identify an element in CSS ans in JavaScript as well (should you ever need it).`
A class (.) can be used as often as it is required.
Example: you have only one header: <div id="header">Header</div>, but several articles: <div class="article">...</div>
Say you have this HTML document:
<div id="site">
<h1>Some heading...</h1>
<div class="article">
<h1>Title</h1>
<p>Some content...</p>
</div>
<div class="article">
<h1>Title</h1>
<p>Some content...</p>
</div>
</div>
The heading of the articles shouldn't be as big as the heading of the site, so we have to use a more specific selector: .article h1 {...}. This will style every <h1>element in a element of the class "article".
If we want to have an even more specific selector, we would use: div.article h1 {...}. This will only style every <h1> element in a <div> box with the class "article"
div.img a:hover img means: find me an img element which is a descendant of an a element that is currently being hovered over, which is in turn a descendant of a div element with a class name og img.
div.desc simply selects any div with a class name of desc.
Have a look at the standards definition, I always find this useful: CSS selectors at W3C.
div.img a:hover img
This will match any img tag that is within an a tag which is currently in a hover state that is within a div tag that has class="img".
div.desc
This will match any div tag with class="desc".
When items are chained like this with only spaces between them, it matches on that specific hierarchy of elements. For example, in the first one, an img tag that's not in an a tag won't be matched.
You can also delimit items with a comma, which instead of matching a hierarchy of items will match each item individually. So something like div.img, img will match any div tag with class="img" and will match any img tag.
Specifically for the :hover attribute, that's called a pseudo-class. It modifies the attribute to which it's attached (in this case an a) by looking for items of that type which are in a specific state (in this case, being hovered over).
I'm trying to select the first h1 inside a div with a class called detail_container. It works if h1 is the first element within this div, but if it comes after this ul it won't work.
<style type="text/css">
.detail_container h1:first-child
{
color:blue;
}
</style>
</head>
<body>
<div class="detail_container">
<ul>
<li></li>
<li></li>
</ul>
<h1>First H1</h1>
<h1>Second H1</h1>
</div>
</body>
</html>
I was under the impression that the CSS I have will select the first h1 no matter where it is in this div. How can I make it work?
The h1:first-child selector means
Select the first child of its parent
if and only if it's an h1 element.
The :first-child of the container here is the ul, and as such cannot satisfy h1:first-child.
There is CSS3's :first-of-type for your case:
.detail_container h1:first-of-type
{
color: blue;
}
But with browser compatibility woes and whatnot, you're better off giving the first h1 a class, then targeting that class:
.detail_container h1.first
{
color: blue;
}
:first-child selects the first h1 if and only if it is the first child of its parent element. In your example, the ul is the first child of the div.
The name of the pseudo-class is somewhat misleading, but it's explained pretty clearly here in the spec.
jQuery's :first selector gives you what you're looking for. You can do this:
$('.detail_container h1:first').css("color", "blue");
For that particular case you can use:
.detail_container > ul + h1{
color: blue;
}
But if you need that same selector on many cases, you should have a class for those, like BoltClock said.
you can also use
.detail_container h1:nth-of-type(1)
By changing the number 1 by any other number you can select any other h1 item.
You could wrap your h1 tags in another div and then the first one would be the first-child. That div doesn't even need styles. It's just a way to segregate those children.
<div class="h1-holder">
<h1>Title 1</h1>
<h1>Title 2</h1>
</div>