Reputation: 25378
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
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
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
Reputation: 5520
You could just use two classes...
.media{
/* styles here */
padding:10px;
}
.slideshow .media{
/* styles here */
padding:20px;
}
Upvotes: 6