This is
one of the most well-known examples of authors misunderstanding how
:first-child works.
rel="noreferrer">Introduced in CSS2, the
:first-child pseudo-class represents the very
first child of its parent. That's it. There's a very common misconception
that it picks up whichever child element is the first to match the conditions specified
by the rest of the compound selector. Due to the way selectors work (see
for an explanation), that is simply not
true.
rel="noreferrer">Selectors level 3 introduces a
:first-of-type pseudo-class, which represents the
first element among siblings of its element type.
answer explains, with illustrations, the difference between
:first-child and :first-of-type.
However, as with :first-child, it does not look at any other
conditions or attributes. In HTML, the element type is represented by the tag name. In
the question, that type is
p.
Unfortunately, there
is no similar :first-of-class pseudo-class for matching the
first child element of a given class. One workaround that
Verou and I came up with for this (albeit totally independently) is to first
apply your desired styles to all your elements with that
class:
/*
* Select all .red children of .home,
including the first one,
* and give them a border.
*/
.home > .red {
border: 1px solid
red;
}
...
then "undo" the styles for elements with the class that come after the first
one, using
rel="noreferrer">the general sibling combinator ~
in an overriding rule:
/*
* Select all but the first .red
child of .home,
* and remove the border from the previous rule.
*/
.home > .red ~ .red {
border:
none;
}
Now
only the first element with class="red" will have a
border.
Here's an illustration of how the rules
are applied:
blah
No
rules are applied; no border is rendered.
This element does
not have the class red, so it's
skipped.
Only the first
rule is applied; a red border is rendered.
This element has
the class red, but it's not preceded by any elements with the
class red in its parent. Thus the second rule is not applied,
only the first, and the element keeps its
border.
Both rules are
applied; no border is rendered.
This element has the class
red. It is also preceded by at least one other element with the
class red. Thus both rules are applied, and the second
border declaration overrides the first, thereby "undoing" it,
so to
speak.
As
a bonus, although it was introduced in Selectors 3, the general sibling combinator is
actually pretty well-supported by IE7 and newer, unlike
:first-of-type and :nth-of-type()
which are only supported by IE9 onward. If you need good browser support, you're in
luck.
In fact, the fact that the sibling
combinator is the only important component in this technique, and
it has such amazing browser support, makes this technique very versatile — you can adapt
it for filtering elements by other things, besides class
selectors:
You
can use this to work around :first-of-type in IE7 and IE8, by
simply supplying a type selector instead of a class selector (again, more on its
incorrect usage here in a later section):
article > p {
/*
Apply styles to article > p:first-of-type, which may or may not be :first-child
*/
}
article > p ~ p {
/* Undo
the above styles for every subsequent article > p
*/
}
You
can filter by
selectors or any other simple selectors instead of
classes.
You can also combine this
overriding technique with
even though pseudo-elements technically aren't simple
selectors.
Note
that in order for this to work, you will need to know in advance what the default styles
will be for your other sibling elements so you can override the first rule.
Additionally, since this involves overriding rules in CSS, you can't achieve the same
thing with a single selector for use with the
or Selenium's CSS
locators.
It's worth mentioning that
Selectors 4 introduces
extension to the :nth-child() notation (originally an
entirely new pseudo-class called :nth-match()), which will
allow you to use something like :nth-child(1 of .red) in lieu
of a hypothetical .red:first-of-class. Being a relatively
recent proposal, there aren't enough interoperable implementations for it to be usable
in production sites yet. Hopefully this will change soon. In the meantime, the
workaround I've suggested should work for most
cases.
Keep in mind that this answer assumes
that the question is looking for every first child element that has a given class. There
is neither a pseudo-class nor even a generic CSS solution for the nth match of a complex
selector across the entire document — whether a solution exists
depends heavily on the document structure. jQuery provides
:eq(), :first,
:last and more for this purpose, but note again that
function very differently from :nth-child() et al.
Using the Selectors API, you can either use
document.querySelector() to obtain the very first
match:
var first =
document.querySelector('.home >
.red');
Or use
document.querySelectorAll() with an indexer to pick any
specific match:
var
redElements = document.querySelectorAll('.home > .red');
var first =
redElements[0];
var second = redElements[1];
//
etc
Although the
.red:nth-of-type(1) solution in the original accepted answer by
Daubmeier works (which was originally written by
since), it does not behave the way you'd expect it
to.
For example, if you only wanted
to select the p in your original
markup:
...
then you can't use .red:first-of-type (equivalent to
.red:nth-of-type(1)), because each element is the first (and
only) one of its type (p and div
respectively), so both will be matched by the
selector.
When the first element of a certain
class is also the first of its type, the pseudo-class will work,
but this happens only by coincidence. This behavior is
demonstrated in Philip's answer. The moment you stick in an element of the same type
before this element, the selector will fail. Taking the updated
markup:
blah
first
second
Applying
a rule with .red:first-of-type will work, but once you add
another p without the
class:
blah
dummy
...
the selector will immediately fail, because the first .red
element is now the second p
element.
I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print &q...
No comments:
Post a Comment