CODEWITHSUNDEEP
htmlcss
Rvervuurt
Rvervuurt

Reputation: 8963

Target DIV on one place that gets used on multiple places

Take the following HTML:

<div id="topbar">
  <div class="sitewidth"></div>
</div>
<div class="sitewidth"></div>
<div id="content" class="sitewidth front-page">
</div>

How do I target the 2nd sitewidth, without triggering the same effect on the sitewidth within topbar and the one in the next div?

Note that I do NOT have access to the HTML, I can only use CSS!

Upvotes: 0

Views: 55

Answers (3)

lee_gladding
lee_gladding

Reputation: 1100

If it is only the one directly after the #topbar you could Try:

#topbar + .sitewidth {
    //CSS rules here
}

here is the fiddle example: http://jsfiddle.net/ho2a9wtp/

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115174

Based on this comment

sitewidth is used on multiple places, also right after this one again. It is, however, the 2nd time it gets used and I think that's how it always is (in other words: as far as I know, nothing gets in between topbar and the second sitewidth

and this structure

<div id="topbar">
  <div class="sitewidth"></div>
</div>
<div class="sitewidth"></div>

Then

#topbar + .sitewidth {
your styles here
}

This will only target the sitewidth div that immediately follows your #topbar and no others.

Upvotes: 1

Alex Char
Alex Char

Reputation: 33218

You can give this a try:

:not(#topbar) > .sitewidth {
  color: red;
}
<div id="topbar">
  <div class="sitewidth">not this</div>
</div>
<div class="sitewidth">this</div>

Upvotes: 0

Related Questions