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>

Answer 1

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