0

I want to target all but first elements with class "icon-flight-close" in the HTML presented below. I've determined that I am unable to do so, because of the header element, which does not have this class, but it has the same parent and is defined at the beginning.

In the first case I place the header at the beginning of the #flights div and in the second case I place it at the end and then styles are applied the way I want.

HTML:

<div id="flights"  class="form-group col-sm-12">
    <div id="flights-heading-wrapper">
        <label class="heading-big">Flights</label>
     </div>
    <div class="flight row">
        <div class="hand-cursor icon-flight-close col-sm-12 text-left"><div><p>aaaa</p></div></div>
    </div>
    <div class="flight row">
        <div class="hand-cursor icon-flight-close col-sm-12 text-left"><div><p>bbbbb</p></div></div>
    </div>
    <div class="flight row">
        <div class="hand-cursor icon-flight-close col-sm-12 text-left"><div><p>bbbbb</p></div></div>
    </div>
</div>

<div id="flights"  class="form-group col-sm-12">
    <div class="flight row">
        <div class="hand-cursor icon-flight-close col-sm-12 text-left"><div><p>aaaa</p></div></div>
    </div>
    <div class="flight row">
        <div class="hand-cursor icon-flight-close col-sm-12 text-left"><div><p>bbbbb</p></div></div>
    </div>
    <div class="flight row">
        <div class="hand-cursor icon-flight-close col-sm-12 text-left"><div><p>bbbbb</p></div></div>
    </div>
    <div id="flights-heading-wrapper">
        <label class="heading-big">Flights</label>
    </div>
</div>

CSS:

.flight:not(:first-child) .icon-flight-close{
    color: red;
}

Here it how it looks like: http://jsfiddle.net/gxz9uke2/2/

koleS
  • 1,263
  • 6
  • 30
  • 46

1 Answers1

3

You can just use

.flight ~ .flight .icon-flight-close {
    color: red;
}
Adrift
  • 58,167
  • 12
  • 92
  • 90
  • Great! Seems as if it works. Explanation please? What did I do wrong and how does your code make it work? – koleS Mar 11 '15 at 14:11
  • I would use `~` in case flights aren't always direct siblings. – Chad Mar 11 '15 at 14:11
  • @koleS: `~` is the [general sibling combinator](http://www.w3.org/TR/css3-selectors/#general-sibling-combinators). In this case, it selects any `.flight`'s that appear after another `.flight` as a sibling (and then any element with the class `.icon-flight-close` within) regardless of which siblings appear between/before or after them. So this allows the selector to ignore the label. – Adrift Mar 11 '15 at 14:17
  • @Adrift Great. Thanks for the explanation. One more question: how would you target first/last .flight div element in this case? – koleS Mar 11 '15 at 14:51
  • @koleS: Unfortunately CSS doesn't have a very convenient way to select the first and last element with a certain class. I suggest reading [this answer](http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class) to understand why that is. It can be done easily with jQuery however using something like `.eq()` – Adrift Mar 11 '15 at 15:01
  • @Adrift: Ok thank you for the answer. I know that I could do that easily with Javascript, I was just curious if it could be done in CSS. – koleS Mar 11 '15 at 15:07
  • @koleS: It can, but it depends on your HTML. If your HTML will remain the same as it is in your example, you can easily select the first and last flight. But if it changes it becomes complicated. – Adrift Mar 11 '15 at 15:08
  • @Adrift: When it comes to the content of #flights div, the HTML will not get anymore complicated. It will be as it is header, plus list of .flight elements. – koleS Mar 11 '15 at 15:11
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/72769/discussion-between-koles-and-adrift). – koleS Mar 11 '15 at 15:15