HTML different styles for two sections

Question

I want to know the weather, there is a way to add two different styles to two blocks of code in HTML. For example, I have two sections

<section>
    <header class="major">
        <h2>Section 1</h2>
    </header>
</section>

and

<section>
    <header class="major">
        <h2>Section 2</h2>
    </header>
</section>

and I want to apply two different styles for two sections.

Please let me know if there is a way to do this.

Answer 1

create two style classes for each section and call them accordingly.

<style type="text/css">
    section.section_1_style{
            // add your section 1 style here
    }

    section.section_2_style{
            // add your section 2 style here
    }
</style>

<section class="section_1_style">
    <header class="major">
        <h2>Section 1</h2>
    </header>
</section>
<section class="section_2_style">
    <header class="major">
        <h2>Section 2</h2>
    </header>
</section>

Answer 2

I would add a class or identifier to each of your sections - this is exactly what they are for.

/* Our base styles*/

section {
 border: dashed 1px black; 
 padding: 1em;
 margin: 1em; 
 font-weight: bold; 
 color: #900;
}


/*Can over ride styles with classes*/

section.type-a {
 background-color: #fee;
 
 border: solid 4px red; 
}

section.type-b {
background-color: #efe;
color: #060;
}

<section class="type-a">
    <header class="major">
        <h2>Section 1</h2>
    </header>
</section>
<section class="type-b">
    <header class="major">
        <h2>Section 2</h2>
    </header>
</section>

Run codeHide result

Answer 3

, . , , div . section section, second-template. , .

script . .

$('.second-template').find('section').css("color", "green");

:

$('.second-template').find('section').css("color", "green");

section {
    background: red;
}

.second-template > section {
    background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
    <header class="major">
        <h2>Section 1</h2>
    </header>
</section>

<div class="second-template">
 /*Include your secoond template here */
 <section>
    <header class="major">
        <h2>Section 1</h2>
    </header>
</section>
 
</div>

Hide result

Answer 4

CSS ( scoped CSS, ) JS .

, CSS JS . , , ( id , ) ( CSS querySelector querySelectorAll ).

Answer 5

You can use the selector nth-of-type():

section:nth-of-type(index){
   //Your rules
}

Hope this helps.

section:nth-of-type(1){
   color: green;
}

section:nth-of-type(2){
    color: red;
}

<section>
    <header class="major">
        <h2>Section 1</h2>
    </header>
</section>

<section>
    <header class="major">
        <h2>Section 2</h2>
    </header>
</section>

Run codeHide result

Answer 6

use CSS3 selector: nth-child () as below

section:nth-child(1) {
    //apply your changes to the first section
}

section:nth-child(2) {
    //apply your changes to the second section
}

Answer 7

If you need to reach your different classes, you need to go through the elements as indicated below. But the main thing is to have a link to the first element using the nth-child selector, I don’t see the need to worry about scripts, the code below works for me and applies different styles to different elements.

<style type="text/css">
    section:nth-child(1) .major{
            background:red;
            height:100px;
            color:#fff;
    }

    section:nth-child(2) .major{
            background:blue;
            height:100px;
            color:lightcyan;
    }
</style>

<section>
    <header class="major">
        <h2>Section 1</h2>
    </header>
</section>


<section>
    <header class="major">
        <h2>Section 2</h2>
    </header>
</section>