I want to know weather there is a way to add two different styles to two code blocks in HTML. For an 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 above two sections.

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

I want to know weather there is a way to add two different styles to two code blocks in HTML. For an 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 above two sections.

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

• javascript
• css
• html

• what are you trying to achieve ? – Aaqib Commented Nov 28, 2017 at 10:01
• 2 For the styles you can use a different class or an id for each sections and apply each style to the specific class or id. About the scripts, I don't know what do you mean. You can use one script and use only the methods needed in each section. – Apostolis I. Commented Nov 28, 2017 at 10:02
• 1 I'm using two html templates, One template with a table and it has it's own style classes and java scripts. The other one is a page template and it has it's own classes. I need to add that table into the second template. – Binara Medawatta Commented Nov 28, 2017 at 10:04
• 1 Are these templates editable? Can you not add ID's to the elements you wish to target? What do the scripts do that are included in the template? Can better help you if I know the answers to these questions :) – Gezzasa Commented Nov 28, 2017 at 10:06
• Yes the templates are editable. Yes adding ID's is possible. The scripts are used for animations of the table. – Binara Medawatta Commented Nov 28, 2017 at 10:08

6 Answers 6

I would add a class or id to each of your sections - that's precisely what they're there 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>

I hope I got your question now. So, what you can do you can add your table template inside another div and give that a class . Now you can define a style for your section and another section which is inside the class second-template. This way you can make the different styling for the same.

Now for the script I have written a sample piece of code. You can change the same accordingly.

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

Try like this:

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

section {
    background: red;
}

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

<script src="https://ajax.googleapis./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>

CSS (except for scoped and contained CSS, which have little browser support) and JS are applied at the document level.

To limit them to a specific region of the document, you have to design the CSS and JS to work that way. Typically you would access all your elements with selectors that are prefixed with an ID selector (after adding an id attribute to the outermost element in each of the groups you are working with) and descendant binator (in the selector for the CSS rule-set or in the argument to querySelector or querySelectorAll respectively).

use the CSS3 :nth-child() Selector as indicated below

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

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

If there is need to reach your different classes, then you need to traverse through the elements as indicated below. But the key thing is having the reference to the first element using the nth-child selector, i do not see the need to bother with scripts, the code below works for me and applies the different styles to the 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>

You could use nth-of-type() selector :

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

Example:

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>