select a specific section using the Simple CSS plugin

Hi there,

Using is ID method you suggested is defintely the right method if you only want to change it to that specific section.

It should be something like:

#generate-section-2 h2 {
    color: #000000;
}

Let me know if this helps :)

I want to apply these codes in section 9;

body{
padding-top:30px;
}
.slider-wrap{
width:616px;
height:120px;
border:1px solid #ccc;
margin:0 auto;
box-shadow: 0 0 10px #000;
border-radius:5px;
overflow:hidden;
}
img, .slider-boxes{
width:120px;
height:120px;
}
.slider-boxes{
display: inline-block;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.slider-boxes:hover{
-webkit-transform: scale(1.30);
transform: scale(1.30);
box-shadow: 0 0 10px #000;
}

show me how to do

when I use it it applies to the whole page.

Hi there,

on the Settings Tab of the Section you will see a Custom Classes field. Add a unique class to this field eg. my-slider-section this could be whatever you want but must be unique.

Then you're CSS would look like this:

.my-slider-section .slider-wrap {
    width: 616px;
    height: 120px;
    border: 1px solid #ccc;
    margin: 0 auto;
    box-shadow: 0 0 10px #000;
    border-radius: 5px;
    overflow: hidden;
}

.my-slider-section img,
.my-slider-section  .slider-boxes {
    width: 120px;
    height: 120px;
}

.my-slider-section .slider-boxes {
    display: inline-block;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.my-slider-section .slider-boxes:hover {
    -webkit-transform: scale(1.30);
    transform: scale(1.30);
    box-shadow: 0 0 10px #000;
}

You can then re-use the my-slider-section class on any section that requires the same styling.

the body selector applies to the entire site so you cannot apply it only to a Section. You can adjust the top and bottom padding in the Settings tab of that particular section.