CODEWITHSUNDEEP
csscss-selectors
luvTweb
luvTweb

Reputation: 159

css addressing not sequential elements

I like to address the h2 following an div with "intro" in it, to give it margin-top:1em so the h2 (after the div with 'intro' in it) has more room above it

<div class="articleWide intro">
   <h2>This header must NOT be effected</h2>
   <p>...</p>
</div>

<div class="articleWide">
   <h2>I like to address ONLY this header because is must have an extra margin-top</h2>
   <p>...</p>
</div>

Have experimented with a selector like 

.articleWide > h2

or

.articleWide ~ h2

but didn't succeed so far.

Upvotes: 2

Views: 317

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 240878

You were using .articleWide ~ h2 which will select h2 elements that are general succeeding siblings of an element with class articleWide. You want to use the following selector instead:

EXAMPLE HERE

.articleWide.intro + .articleWide > h2 {
    margin-top:1em;
}

Which will select the .articleWide element that is a adjacent succeeding sibling of .articleWide.intro and select the direct child h2 element.

Upvotes: 3

TimSPQR
TimSPQR

Reputation: 2984

Here a slightly different approach, just to give another perspective. FIDDLE

Styling probably should depend on the length of the article, total number of chapters and schemes on the rest of the site.

CSS

.articleWide {
    width: 90%;
    border: 0px solid green;
    border-radius: 10px;
    background-color: #E0DEE0;
    margin-bottom: 0px auto 5px auto;
    padding-top: 5px;
}
.intro {
    background-color: #E6E4F5;
}
.articleWide h2 {
    text-align: center;
}
.articleWide p {
    padding: 0 20px 10px 20px;
}
.articleWide:nth-child(2) {
    margin-top: 30px;
}

Upvotes: 1

Related Questions