Styling two sections differently with the same CSS class

Question

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;
}

Please check the answer of https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class — Sayedur Rahman, May 11 '21 at 21:23
Ok so I did find that I can use the last-of-type and just change the last section (since the second section is the last). I could also use the nth-of-type if I wanted to count the sections and change the second to last. Very interesting the use of the sibling combinator. I will have to remember all of these since they are all new. Thank you! — Inventive Web Design, May 11 '21 at 21:58
Uhg why all the `!important`? This will turn into a mess quickly! — dale landry, May 11 '21 at 22:40
What is your element inspector showing? Why are these not working? There is a chance your styles are loaded before the offending styles. If those have an `!important` on them, they will overwrite your `!important`. — Kenton de Jong, May 12 '21 at 00:06

score 1 · Answer 1 · answered May 11 '21 at 21:59

1

In the end the easiest way was to use:

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

Thank you Sayedur Rahman!

answered May 11 '21 at 21:59

Inventive Web Design

103
6

In other words, you were applying the background to the wrong element by mistake? Because the only difference here is that you're applying it to the last one and not the first as you were originally trying to do. – BoltClock May 12 '21 at 04:34
No, I was using first-child instead of first-of-type and last-child instead of last-of-type. If you look at my first example CSS above you will see last-child was one of them. – Inventive Web Design May 12 '21 at 23:21

score 0 · Answer 2 · edited May 11 '21 at 23:17

0

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

edited May 11 '21 at 23:17

Dharman

30,962
25
85
135

answered May 11 '21 at 23:12

Jan Thoresen

71
1
8

I could but as I explained in my post, changing the code is very complicated on this particular site. – Inventive Web Design May 12 '21 at 23:21

score 0 · Answer 3 · answered May 11 '21 at 23:37

0

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

answered May 11 '21 at 23:37

tryearyean

23
5

score 0 · Answer 4 · edited May 12 '21 at 01:43

0

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;
}

edited May 12 '21 at 01:43

AloHA_ChiCken

484
1
5
24

answered May 11 '21 at 23:47

OthManE01

31
1
5

Styling two sections differently with the same CSS class

4 Answers4