CODEWITHSUNDEEP
htmlcsscss-selectors
user1632018
user1632018

Reputation: 2555

CSS ID selector not working with span, a, p etc

Originally I was using two different stylesheets to style my website. One for the front page and the other for the rest of it(the style and function is completely differen't). I decided I would merge the two together and just add a #home selector on the original stylesheets classes.

So with that said after merging them, I can tell that any of the standard classes(span, a, p, h1, h2) are not workking. They are adding both styles to them. The ones with the #home selector and the styles without. Here is an example:

When I am using 'a' in my nav menu it should only use this style:

#home .nav ul li a {
        color: #ccc; 
        text-decoration: none;
        padding: 20px;
}

Although it is adding this too: 

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite {
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
    margin:0;
    padding:0;

}

So basically it is anything contained in this group. Am I missing something as to why it is inheriting the classes with the proper selector and no selector at all? Thanks in advance.

Upvotes: 1

Views: 1154

Answers (2)

Ramon
Ramon

Reputation: 434

i think the only way to prevent this is to set all settings in the #home selector too to overwrite the general settings.

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157334

html,body,div,span,object,iframe,h1 ...... This selector is a general element selector which will target all the elements which are separated by comma, and hence it applies the properties of your selector as well as the other one.

Those kind of selectors are generally used in Reset Stylesheets, this selector #home .nav ul li a is anyways more specific than the element selector, but those properties which you do not declare in #home .nav ul li a will be picked up from element selector.

So you can do nothing but override those, by again declaring the same properties in #home .nav ul li a as well.

Upvotes: 2

Related Questions