CODEWITHSUNDEEP
csscss-selectors
Shpigford
Shpigford

Reputation: 25378

How to only select this class?

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>

Upvotes: 1

Views: 134

Answers (3)

Ruan Mendes
Ruan Mendes

Reputation: 92334

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

Upvotes: 4

Puyol
Puyol

Reputation: 3109

Try this:

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

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

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

Upvotes: 1

Trey
Trey

Reputation: 5520

You could just use two classes...

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

Upvotes: 6

Related Questions