How to only select this class?

Question

How would I only select the .media class that is NOT a child of the .slideshow class?

<article>
    <div class="entry"></div>
    <figure class="media"></figure>
</article>

<article>
    <div class="slideshow">
        <div class="entry"></div>
        <figure class="media"></figure>
    </div>
</article>

Obviously I can do .slideshow .media to target the second one, but how would I target that first one?

NOTE: There are multiples of each of these blocks, so just doing something like article:first-chlid to select the first instance wouldn't work.

Example of multiple blocks...

<article>
    <div class="entry"></div>
    <figure class="media"></figure>
</article>

<article>
    <div class="entry"></div>
    <figure class="media"></figure>
</article>

<article>
    <div class="entry"></div>
    <figure class="media"></figure>
</article>

<article>
    <div class="slideshow">
        <div class="entry"></div>
        <figure class="media"></figure>
    </div>
</article>

<article>
    <div class="entry"></div>
    <figure class="media"></figure>
</article>

<article>
    <div class="slideshow">
        <div class="entry"></div>
        <figure class="media"></figure>
    </div>
</article>

Can you show what the multiples of these blocks would look like? — BoltClock, Aug 09 '12 at 19:02

score 6 · Answer 1 · edited Aug 09 '12 at 19:03

6

You could just use two classes...

.media{
  /* styles here */
  padding:10px;
}
.slideshow .media{
  /* styles here */
  padding:20px;
}

edited Aug 09 '12 at 19:03

BoltClock

700,868
160
1,392
1,356

answered Aug 09 '12 at 19:02

Trey

5,480
4
23
30

it depends on how the html is added, if you are using a CMS or something that is building the structure for you, this is easier... otherwise I like your method – Trey Aug 09 '12 at 19:04
That's backwards for what I want to do. Like I said, I know I can do `.slideshow .media` to select the second, but I need to select on that first one. – Shpigford Aug 09 '12 at 19:44
the point is that `.slideshow .media` is more specific and will override `.media`. – Trey Aug 10 '12 at 04:20

Ruan Mendes · Accepted Answer · 2012-08-09T19:20:22.863

They don't mean the exact same thing, so I would add a second class to the class=media part so you can target it separately

<article>
    <div class="entry"></div>
    <figure class="media"></figure>
</article>

<article>
    <div class="slideshow">
        <div class="entry"></div>
        <figure class="media another-class"></figure>
    </div>
</article>

CSS

.media.another-class {...}

You could also use the immediate child selector

article > .media

score 1 · Answer 3 · answered Aug 09 '12 at 19:11

1

Try this:

:not(.slideshow)>.media{
  //code here
}

example:
http://jsfiddle.net/kLyDF/

info:
http://www.w3schools.com/cssref/sel_not.asp

answered Aug 09 '12 at 19:11

Puyol

3,084
5
25
33

Wish I could like this twice, I had completely forgotten about it... IE finally supports it, in the past I was unable to use it because of IE [compatibility](http://www.quirksmode.org/css/contents.html) – Trey Aug 09 '12 at 19:16
Besides the oft-nagged issue of browser support, using `:not()` to exclude parents is very fragile; see http://stackoverflow.com/questions/7084112/css-negation-pseudo-class-not-for-parent-ancestor-elements Given the markup, it is safe to assume that `article` is the only other parent that can be `:not(.slideshow)`. – BoltClock Aug 10 '12 at 06:45

How to only select this class?

3 Answers3