Question

I have a form which is linked with various stylesheets. I have two stylesheets which has styles for the select tag. So its getting conflicted when i link both stylesheets.

For example

I have style1.css and style2.css which contains styles for select tag. And i have two select tags with ids select1 and select2.

I want only the style from style1.css to be applied to select1 and styles from style2.css to select2. How can i do it ?

I can’t specify the styles to those particular id, because it will affect other select tags too.

How can i make the styles of different style sheets to work only in a particular place?

Answer 1

You can use CSS3’s :not() selector. For example, in style2.css, you would write:

select:not(#select1) {
    // styling here will be applied to all selects except select1
}

But in reality you should just keep all the styling for the select tag in one CSS document. This way you can more easily control the conflicts.