Styling two sections differently with the same CSS class

user_15652286 0
Viewed 224

I have a website that I inherited. Without getting into detail, changing the code on this site has proven to be difficult. I now have two sections that I want to give different background colors to.

HTML:

<div class="wrapper">
<section class="easier_sec">
    <div class="container clearfix">
        <h3>See our ice maker in action...</h3>
                    <a href="https://vimeo.com/" class="btn"> VIEW VIDEO </a>
            </div>
</section>
<section class="easier_sec">
    <div class="container clearfix">
        <h3>Getting started is easier than you think…</h3>
                    <a href="contact-us/" class="btn"> CONTACT US </a>
            </div>
</section>
</div>

There are many more sections on the page I am working on but these are the only two that I am trying to change.

I have tried various CSS commands using the child selector but none work. I am hoping there is a way to do this without trying to dig into the code.

CSS I have tried:

.wrapper section:last-child {
    background-color:#000 !important;
} 

.wrapper section.easier_sec:first-child {
    background-color:#000 !important;
} 

section.easier_sec::first-child {
    background-color:#000 !important;
} 

section.easier_sec:first-child {
    background-color:#000 !important;
} 

.easier_sec:first-child {
    background-color:#000 !important;
}
css-selectors css html
4 Answers

In the end the easiest way was to use:

section:last-of-type {background-color:#000!important;}

Thank you Sayedur Rahman!

user_156522860

You could also give one of them an ID or an extra class, then apply a different set of styles to that specific section.

user_123406680

You could always look at :nth-child(even) {background-color:#000 !important} if you want to alternate backgrounds as you add more sections.

user_157973560

You can get rid of those :first-child selectors by adding another class to override the old background-style in those section like :

bg-dark {
   background-color: #000 !important;
}
user_127206530
Related