CSS file for children of one section - css

Question

I have many sections on my page. Every of these sections can have similar elements, for example in each of these sections can be h1 element.
I want to add css files where every of these css will be for only one section.
For example I have three sections on my page where ids are:
section1 -- section2 -- section3
I have three css files too with names:
section1.css -- section2.css -- section3.css
How to do that every css file refers to a suitable section?
Maybe can I add any additional block to every of these css files with section id?

Answer 1

I don't know why you want to do that, but if you want to have separate styles for each section which has unique ID just use the ID as a selector. For example:
section1.css
#section1 h1{ color:red;}
#section1 .someclass { color: blue}
section2.css
#section2 h1 { color: green;}
#section2 .someclass {color:yellow;}
And so on. You will have separate styles for each section selecting them by ID. I think it's the easiest way

Answer 2

CSS files doesn't refer to its elements (in your case id). Its the selector which actually targets elements. You can use separate for each of the children on each section.
Instead use inheritance with each id.
Have a look at the example snippet below:
/* Section 1 */
#section1 {
background: #ff0;
padding: 10px 15px;
}
#section1 p {
background: #99d;
}
/* Section 2 */
#section2 {
background: #99d;
padding: 10px 15px;
}
#section2 p {
background: #ae9;
}
/* Section 3 */
#section3 {
background: #ae9;
padding: 10px 15px;
}
#section3 p {
background: #ff0;
}
body {
margin: 0;
}
<div id="section1">
<strong>Section 1</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quam dicta libero qui sapiente beatae sunt, aspernatur et reprehenderit natus dolor, sint aliquid iure magni quibusdam accusantium provident perspiciatis fugit.</p>
</div>
<div id="section2">
<strong>Section 2</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quam dicta libero qui sapiente beatae sunt, aspernatur et reprehenderit natus dolor, sint aliquid iure magni quibusdam accusantium provident perspiciatis fugit.</p>
</div>
<div id="section3">
<strong>Section 3</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quam dicta libero qui sapiente beatae sunt, aspernatur et reprehenderit natus dolor, sint aliquid iure magni quibusdam accusantium provident perspiciatis fugit.</p>
</div>
Hope this helps!