How can I implement this via pure css about :first-of-type

Question

<div class="wrapper">
    <!--
      Several random elements that I'm not able to predict.
      div, p, h3, etc. 
    --> 
    <div class="foo">...</div>
    <!-- 
      Could have only 1 .foo, 2 .foo, or 3, 4, 5 .foo... 
    -->
    <div class="foo">...</div>
    <!--
      Also several random elements
    -->
</div>

HTML code is something like above. Now I know the reason why div.foo:first-of-type doesn't work. But is there any alternative solution?

How can I select the first .foo? How can I select the last .foo? Of course via pure css...

Thanks!

Have you tried something like- p:nth-of-type(2) { background: #ff0000; } — CodeRomeos, Sep 03 '15 at 18:53
first-of-type only applies to element, if you add a class to it, it still needs to be first-of-type to match the class. you will need javascript. CSS has limits ;) — G-Cyrillus, Sep 03 '15 at 18:55

score 2 · Accepted Answer · edited May 23 '17 at 12:14

2

How can I select the first .foo?

The technique described here: CSS selector for first element with class:

div.foo {
  /* Style all */
}

div.foo ~ div.foo {
  /* Revert styles for all but the first */
}

How can I select the last .foo?

The technique described above relies on sibling selectors and overrides. The biggest limitation of sibling selectors is that they only work in one direction, and since they work for the first element by overriding for all elements after the first, they won't work for the last because you can't select siblings that come before some other element using sibling selectors.

There is no pure CSS alternative.

edited May 23 '17 at 12:14

Community

1
1

answered Sep 03 '15 at 18:56

BoltClock

700,868
160
1,392
1,356

There is an alternative ... I hope that I don't get many downvotes for posting it ... – vals Sep 03 '15 at 21:15
yes I'm stuck at the last `.foo` too. But anyway, the first `.foo` solution is correct. Thank you! – Aemon Sep 04 '15 at 03:57

score 1 · Answer 2 · answered Sep 03 '15 at 21:14

Any HTML5 browser will let you use nth-of-type as it is intended...

I am not saying this is a recomended technique, I am just showing how this option works ...

I don't know if you will like it or not, but AFAIK is the only way to get what you want for the last one (as BoltClock says)

foo:first-of-type {
  background-color: lightgreen;
}

foo:last-of-type {
  background-color: lightblue;
}

<div>
  <div>div</div>
  <foo>foo</foo>
  <div>div</div>
  <foo>foo</foo>
  <div>div</div>
  <foo>foo</foo>
</div>

yeah I know this is a workaround but in my case I can't use such customized tag ``. Thanks anyway~! — Aemon, Sep 04 '15 at 03:55

score 0 · Answer 3 · answered Sep 03 '15 at 19:06

0

you can use first-child, and last-child

html

<div class="wrapper">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

css

p:first-child {
    color: red;
}

p:last-child {
    color: green;
}

Here's a JsFiddle Example

Beware that last-child is only supported since IE 9, and first-child is supported from IE 7

answered Sep 03 '15 at 19:06

Andrew

2,810
4
18
32

@BoltClock his question is how to select the first & last of `.foo` ... sorry if I dont get what he meant – Andrew Sep 04 '15 at 03:57

How can I implement this via pure css about :first-of-type

3 Answers3