0

I am trying to apply a style to every instance of a div except the first, I've tried every combination of nth-child and first-of-type that I can think of to no avail.

Here is the HTML:

<div id="calendar">
    <div class="large-2 medium-2 columns">&nbsp;</div>
    <div class="large-8 medium-8 columns">
        <div class="month">April</div>
        <div class="event">
            <div class="date large-2 medium-2 left"><span class="day">18</span><span class="dayofweek">FRI</span></div>
            <div class="description large-10 medium-10 left">
                <div class="title">Test Event</div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ut sem sed sagittis.</p>
                    <div class="rsvp">RSVP</div>
                    <div class="facebook"></div>
                    <div class="twitter"></div>
                </div>
            </div>
        </div>
        <div class="event">
            <div class="date large-2 medium-2 left"><span class="day">20</span><span class="dayofweek">SUN</span></div>
            <div class="description large-10 medium-10 left">
                <div class="title">Test Event 2</div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ut sem sed sagittis.</p>
                    <div class="rsvp">RSVP</div>
                    <div class="facebook"></div>
                    <div class="twitter"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="large-2 medium-2 columns">&nbsp;</div>
</div>

I would like to apply a style to every instance of the "description" div EXCEPT for the first instance, can anyone tell me what selector I would use for this? Thanks!

user13286
  • 3,027
  • 9
  • 45
  • 100

3 Answers3

1

Doing this with CSS natively is currently not possible: see this question.

However, one way to do this is to apply the styles using jQuery:

$($(".description")[0]).css({

    background: "red",
    width: "40%"

});

JSFiddle

You could also create a CSS class with the changes and apply that to the first element using jQuery:

$($(".description")[0]).addClass("first-description");

JSFiddle

Community
  • 1
  • 1
Liftoff
  • 24,717
  • 13
  • 66
  • 119
  • I'd guess that it's because the tag doesn't mention jQuery or JavaScript. – j08691 Apr 07 '14 at 20:37
  • @j08691 True, but my solution does work, and I provided a link to a related question which explains that CSS does not support this. – Liftoff Apr 07 '14 at 20:37
  • Not the answer I was hoping for, but thank you for the workaround, I'm gonna end up doing some animation of the divs eventually anyway, so I suppose it's not that big of a deal. – user13286 Apr 07 '14 at 21:12
0

Can't you style all the div tags how you want them then use first-of-type to override all the styles on the first div?

OrderAndChaos
  • 3,547
  • 2
  • 30
  • 57
  • I tried .description:first-of-type but it didn't seem to do anything. [JSFiddle](http://jsfiddle.net/P8kKT/) – user13286 Apr 07 '14 at 20:35
  • Ok so I would want to use nth-of-type and select the 2nd div in the `event` class then? – user13286 Apr 07 '14 at 20:38
  • Something like this then? .myclass1 { color: red; } .myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; } http://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name – OrderAndChaos Apr 07 '14 at 20:48
  • I wasn't aware this only selected types. – OrderAndChaos Apr 07 '14 at 20:49
0

If you don't want to style the div remove the class and use another one or you could just add something like .first and style it however you want.

I say this as there doesn't appear to be a selector for this.

OrderAndChaos
  • 3,547
  • 2
  • 30
  • 57