Issue
I'm trying to target the first h3 of the page, but hitting all h3s instead. I've tried below, and with >
, but that only works when it's directly inside the body and not nested.
body h3:first-of-type{ /*code*/ }
Any ideas?
I don't want to resort to adding IDs everywhere.
Solution
First-of-type
will target the first element of that type within its parent, not within the ancestor you've specified. So if your HTML was like
<body>
<div>
<h3>first</h3>
</div>
<div>
<h3>second</h3>
</div>
</body>
then both h3
elements will be targeted because each is the first h3
within its parent.
Given that you only want to target one element, it does seem like adding an id is the sensible approach.
(It would also be possible to do this with jQuery (which has a :first
selector), though that of course would depend on javascript being enabled, and is probably overkill if you don't need it for other reasons.)
Answered By - Jacob Mattison
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.