0

I have the following html:

<ul class="alist">
    <li class="list-item">
        <div class="some-class">stuff</div>
        <div class="another-class">apple</div>
        <div class="another-class">banana</div>
        <div class="another-class">cake</div>
   </li>
    <li class="list-item">
        <div class="another-class">airport</div>
        <div class="another-class">bus stop</div>
   </li>
    <li class="list-item">
        <div class="some-class">stuff</div>
   </li>
</ul>

What I would like is a css selector that would select the divs that contain "apple" and "airport" as they are the first children of "list-items" that have the class "another-class". I know this is possible in jQuery but I would rather have a css class for this. I've tried:

.list-item > div.another-class:first-child {

}

or utilized :first-of-type and things very similar but alas nothing has worked.

Here is a jsfiddle showing what I mean.

Something tells me this isn't possible though.

Jaden Travnik
  • 1,107
  • 13
  • 27
  • 4
    No, with pure CSS it wouldn't be possible to find out the first element with a certain class. However, you may try something like [this](http://jsfiddle.net/hvvkweLe/4/). – Harry Sep 09 '14 at 16:19
  • The 2nd answer to this question has a good explanation: http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class – CodingWithSpike Sep 09 '14 at 16:24

0 Answers0