First-child/last-child

HTML & CSS
1

can I do

header :first-child

without specifying element?

what if inside a header you have <a> and two <ul>'s??

i.e.,


<header>
[INDENT]<a>link</a>[/INDENT]
[INDENT]<ul>....</ul>[/INDENT]
[INDENT]<ul>...</ul>[/INDENT]
</header>

how do I refer to the FIRST <ul>??? (2nd element inside <header>)

thank you…

2

removed…

bad question…

sorry… :wink:

3

header ul:first:child
header ul:nth-child(2) –> 2nd UL from header

Good Lucky.

4

Yes, that will target the first child of the <header>, no matter what it is.

what if inside a header you have <a> and two <ul>'s??

<header>
[INDENT]<a>link</a>[/INDENT]
[INDENT]<ul>....</ul>[/INDENT]
[INDENT]<ul>...</ul>[/INDENT]
</header>

how do I refer to the FIRST <ul>??? (2nd element inside <header>)

header ul:first-of-type will hit the first <ul> inside <header>, regardless of whether it’s the first element or there are other children that come first.

[font=verdana]The problem with that approach is that you need to know in advance how many older children there are, which makes it difficult to create a general stylesheet that will work flexibly with different content.

header ul:first-child will only target a <ul> that is the first child of the <header> … if the first child is not a <ul> then it won’t apply at all.[/font]

5 
Quote Originally Posted by Thavo View Post

header ul:first:child
header ul:nth-child(2) --> 2nd UL from header

[font=verdana]The problem with that approach is that you need to know in advance how many older children there are, which makes it difficult to create a general stylesheet that will work flexibly with different content.

yes I was thinking the same thing, it’s not too practical for when you don’t know how many children there are because they’re loaded dynamically…

header ul:first-child will only target a <ul> that is the first child of the <header> … if the first child is not a <ul> then it won’t apply at all.[/font]

I thought so… this is the crux of this thing… :wink:

thank you…

6

header ul:first-child will only target a <ul> that is the first child of the <header> … if the first child is not a <ul> then it won’t apply at all.

Which is why you need :first-of-type (of course, this means no support for IE <=8 )

7

yep… this is the other thing about these slick new CSS3 features, the spotty support for IE <=8, like you say… one thing I love about these CSS3 features is it enables you to write cleaner, less verbose markup, which I think this is great, but with iffy support for IE<=8 they’re not too practical or plausible… (now how about mobile??? I was very surprised recently to find some mobile browsers (Windows, Android) don’t support some HTML5 tags… so what about CSS3? do all mobile browsers support all CSS3 features or not?)

thank you…