Is there a functional difference between *:first-child and :first-child?
They are identical even if we consider performance. From the specification we can read
If a universal selector represented by * (i.e. without a namespace prefix) is not the only component of a sequence of simple selectors selectors or is immediately followed by a pseudo-element, then the * may be omitted and the universal selector's presence implied.
So writing > :first-child
should mean the same as > *:first-child
for the browser.
You can also read
Note: it is recommended that the * not be omitted, because it decreases the potential confusion between, for example,
div :first-child
anddiv:first-child
. Here,div *:first-child
is more readable.
So it's not only a matter of preference but it helps avoid confusion and make the code more readable.
In the new sepcification we can also read:
Unless an element is featureless, the presence of a universal selector has no effect on whether the element matches the selector.
and
Note: In some cases, adding a universal selector can make a selector easier to read, even though it has no effect on the matching behavior. For example,
div :first-child
anddiv:first-child
are somewhat difficult to tell apart at a quick glance, but writing the former asdiv *:first-child
makes the difference obvious.
What is the difference between :first-child and :first-of-type?
A parent element can have one or more child elements:
<div class="parent">
<div>Child</div>
<div>Child</div>
<div>Child</div>
<div>Child</div>
</div>
Among these children, only one of them can be the first. This is matched by :first-child
:
<div class="parent">
<div>Child</div> <!-- :first-child -->
<div>Child</div>
<div>Child</div>
<div>Child</div>
</div>
The difference between :first-child
and :first-of-type
is that :first-of-type
will match the first element of its element type, which in HTML is represented by its tag name, even if that element is not the first child of the parent. So far the child elements we're looking at have all been div
s, but bear with me, I'll get to that in a bit.
For now, the converse also holds true: any :first-child
is also :first-of-type
by necessity. Since the first child here is also the first div
, it will match both pseudo-classes, as well as the type selector div
:
<div class="parent">
<div>Child</div> <!-- div:first-child, div:first-of-type -->
<div>Child</div>
<div>Child</div>
<div>Child</div>
</div>
Now, if you change the type of the first child from div
to something else, like h1
, it will still be the first child, but it will no longer be the first div
obviously; instead, it becomes the first (and only) h1
. If there are any other div
elements following this first child within the same parent, the first of those div
elements will then match div:first-of-type
. In the given example, the second child becomes the first div
after the first child is changed to an h1
:
<div class="parent">
<h1>Child</h1> <!-- h1:first-child, h1:first-of-type -->
<div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
<div>Child</div>
<div>Child</div>
</div>
Note that :first-child
is equivalent to :nth-child(1)
.
This also implies that while any element may only have a single child element matching :first-child
at a time, it can and will have as many children matching the :first-of-type
pseudo-class as the number of types of children it has. In our example, the selector .parent > :first-of-type
(with an implicit *
qualifying the :first-of-type
pseudo) will match two elements, not just one:
<div class="parent">
<h1>Child</h1> <!-- .parent > :first-of-type -->
<div>Child</div> <!-- .parent > :first-of-type -->
<div>Child</div>
<div>Child</div>
</div>
The same holds true for :last-child
and :last-of-type
: any :last-child
is by necessity also :last-of-type
, since absolutely no other element follows it within its parent. Yet, because the last div
is also the last child, the h1
cannot be the last child, despite being the last of its type.
:nth-child()
and :nth-of-type()
function very similarly in principle when used with an arbitrary integer argument (as in the :nth-child(1)
example mentioned above), but where they differ is in the potential number of elements matched by :nth-of-type()
. This is covered in detail in What is the difference between p:nth-child(2) and p:nth-of-type(2)?
Does :first-child work whether the type is known or unknown?
:first-child
can be used with or without knowing the element type.
You can either do parent > :first-child
to match any first child, whatever node type it is, or you can do parent > p:first-child
to only match the first child if it's a p
tag.
You can also do parent > p:first-of-type
to match the first p
inside parent
, even if it isn't the first child.
What is the difference between p:nth-child(2) and p:nth-of-type(2)?
This question may remind you of What is the difference between :first-child and :first-of-type? — and in fact, a lot of parallels can be drawn between the two. Where this question greatly differs from the other is the arbitrary integer argument X, as in :nth-child(X)
and :nth-of-type(X)
. They're similar in principle to their "first" and "last" counterparts, but the potentially matching elements vary greatly based on what's actually in the page.
But first, some theory. Remember that simple selectors are independent conditions. They remain independent even when combined into compound selectors. That means that the p
neither is influenced by, nor influences, how :nth-child()
or :nth-of-type()
matches. Combining them this way simply means that elements must match all of their conditions simultaneously in order to match.
Here's where things get interesting. This independent matching means I can get pretty creative in how I express compound (and complex) selectors in terms of plain English, without changing the meaning of the selectors. In fact, I can do so right now in a way that makes the difference between :nth-child(2)
and :nth-of-type(2)
seem so significant that the pseudo-classes might as well be completely unrelated to each other (except for the "siblings" part anyway):
p:nth-child(2)
: Select the second child among its siblings if and only if it is ap
element.p:nth-of-type(2)
: Select the secondp
element among its siblings.
All of a sudden, they sound really different! And this is where a bit of explanation helps.
Any element may only have a single child element matching :nth-child(X)
for any integer X at a time. This is why I've chosen to emphasize "the second child" by mentioning it first. In addition, this child element will only match p:nth-child(X)
if it happens to be of type p
(remember that "type" refers to the tagname). This is very much in line with :first-child
and :last-child
(and, similarly, p:first-child
and p:last-child
).
There's two aspects to :nth-of-type(X)
on the other hand:
Because the "type" in
:nth-of-type()
is the same concept as the "type" in a type selector, this family of pseudo-classes is designed to be used in conjunction with type selectors (even though they still operate independently). This is whyp:nth-of-type(2)
can be expressed as succinctly as "Select the secondp
element among its siblings." It just works!However, unlike
:first-of-type
and:last-of-type
, the X requires that there actually be that many child elements of the same type within their parent element. For example, if there's only onep
element within its parent,p:nth-of-type(2)
will match nothing within that parent, even though thatp
element is guaranteed to matchp:first-of-type
andp:last-of-type
(as well as, by extension,p:only-of-type
).
An illustration:
<div class="parent">
<p>Paragraph</p>
<p>Paragraph</p> <!-- [1] p:nth-child(2), p:nth-of-type(2) -->
<p>Paragraph</p>
<footer>Footer</footer>
</div>
<div class="parent">
<header>Header</header>
<p>Paragraph</p> <!-- [2] p:nth-child(2) -->
<p>Paragraph</p> <!-- [3] p:nth-of-type(2) -->
<footer>Footer</footer>
</div>
<div class="parent">
<header>Header</header>
<figure>Figure 1</figure>
<p>Paragraph</p> <!-- [4] -->
<footer>Footer</footer>
</div>
<div class="parent">
<header>Header</header>
<p>Paragraph</p> <!-- [2] p:nth-child(2) -->
<figure>Figure 1</figure>
<hr>
<figure>Figure 2</figure> <!-- [5] .parent > :nth-of-type(2) -->
<p>Paragraph</p> <!-- [5] .parent > :nth-of-type(2) -->
<p>Paragraph</p>
<footer>Footer</footer>
</div>
What's selected, what's not, and why?
Selected by both
p:nth-child(2)
andp:nth-of-type(2)
The first two children of this element are bothp
elements, allowing this element to match both pseudo-classes simultaneously for the same integer argument X, because all of these independent conditions are true:- it is the second child of its parent;
- it is a
p
element; and - it is the second
p
element within its parent.
Selected by
p:nth-child(2)
only
This second child is ap
element, so it does matchp:nth-child(2)
.But it's the first
p
element (the first child is aheader
), so it does not matchp:nth-of-type(2)
.Selected by
p:nth-of-type(2)
only
Thisp
element is the secondp
element after the one above, but it's the third child, allowing it to matchp:nth-of-type(2)
but notp:nth-child(2)
. Remember, again, that a parent element can only have one child element matching:nth-child(X)
for a specific X at a time — the previousp
is already taking up the:nth-child(2)
slot in the context of this particular parent element.Not selected
Thisp
element is the only one in its parent, and it's not its second child. Therefore it matches neither:nth-child(2)
nor:nth-of-type(2)
(not even when not qualified by a type selector; see below).Selected by
.parent > :nth-of-type(2)
This element is the second of its type within its parent. Like:first-of-type
and:last-of-type
, leaving out the type selector allows the pseudo-class to potentially match more than one element within the same parent. Unlike them, how many it actually matches depends on how many of each element type there actually are.Here, there are two
figure
elements and threep
elements, allowing:nth-of-type(2)
to match afigure
and ap
. But there's only oneheader
, onehr
, and onefooter
, so it won't match elements of any of those types.
In conclusion, :nth-child()
and :nth-of-type()
, with an integer argument X (i.e. not in the form An+B with a coefficient A of n), function pretty similarly to :first-child
/:last-child
and :first-of-type
/:last-of-type
, with the major difference being that the argument, along with the page itself, influences how many different elements may be matched with :nth-of-type()
.
Of course, there's a whole lot more to :nth-child()
and :nth-of-type()
than just a simple integer argument, but needless to say the details and possibilities thereof are outside the scope of this question.
:first-child and :nth-child(1) not working
The :first-child CSS pseudo-class represents the first element among a group of sibling elements.
The correct selector is .contacts p:first-child
If you wanted it to work only based on the container and not know or care what it contains you could use .contacts > *:first-child
When you use it as you are on the container what you are actually asking for via css is an element with the class .contacts
that is the first child among it's sibling elements.
difference between :first and :first-child not clear
From Official Docs:
The :first pseudo-class is equivalent
to :eq(0). It could also be written as
:lt(1). While this matches only a
single element, :first-child can
match more than one: One for each
parent.
While :first
matches only a single element, the :first-child
selector can match more than one: one for each parent. This is equivalent to :nth-child(1)
.
http://api.jquery.com/first-selector/
Update:
Here is an example using :first-child
:
http://jsbin.com/olugu
You can view its soruce and edit yourself. If you replace :first-child
with :first
, it will only highlight the first word there. This is what is defined for them.
And here is example using :first
:
http://jsbin.com/olugu/2
CSS selector for other than the first child and last child
Try:
#navigation ul li:not(:first-child):not(:last-child) {
...
}
CSS :before and :first-child combined
Try
#navigation_center li:first-child:before {
content: '';
}
Edit: I wanted to expand on this answer with comments made by FelipeAls. The original question used :first
which is not a valid CSS selector. Instead, use :first-child
. Also the order of the pseudo-selectors is important. The first child selector must come first.
I tend to think of :before
as a kind of modifier to a selector. It does not actually select an element only the space just before the selected element.
Related Topics
Xhtml/Css: How to Make Inner Div Get 100% Width Minus Another Div Width
Height: Calc(100%) Not Working Correctly in CSS
How Is "Grid-Template-Rows: Auto Auto 1Fr Auto" Interpreted
Css: Background-Color on Multi-Line Text
Using Modulus in CSS Calc Function
Fonts Are Not Rendered Correctly in Release Mode, But Is Working on Debug Mode in Asp Net Webforms
How to Stretch Children to Fill Cross-Axis
Is There an Opposite CSS Pseudo-Class to :Hover
Chrome & Safari Error::Not Allowed to Load Local Resource: File:///D:/Css/Style.Css
How to Right Align Div Elements
Have a Fixed Position Div That Needs to Scroll If Content Overflows
Css: Left, Center, & Right Align Text on Same Line
Change Bootstrap Carousel Fade Transition
How to Make an Inset Drop Shadow in Svg
Are All CSS Font-Weight Property's Values Useful
Highcharts Graph Width Is Incorrect When Scrollbar Is Present, in Bootstrap Fluid Span