How to override priority in CSS classes?


Tags: html,css

Problem :

And I apply the styles with this classes

#contentheader .cat {
border-top:3px solid #ccc;
background-color:#eee;
overflow:hidden;
}

#contentheader .cat li a {
color:#999;
font-weight:700;
text-decoration:none;
font-size:13px;
display:block;
border-right:1px solid #fff;
float:left;
padding:10px;
}

#contentheader .cat li a:hover {
background-color:#E9E9E9;
}

The problem is that I need the first <li> (Home) to be different, maybe making the text in other color, or maybe making the font wider. I try assigning a class directly to the <li> or the <a> tags, but it doesn't works, it always take the styles in the #contentheader .cat li a class. What is the best way to do this? Thanks



Solution :

You need to increase the specificity of that selector to have it override a rule with a lower selector specificity.

So if you assign the class to the li element, use #contentheader .cat li.class a, for the a element, use #contentheader .cat li a.class.


    CSS Howto..

    How to let Materialize use classes for dropdowns and not ID's?

    how to animate with CSS?

    how i can make slideshow, get information(image, title , content) from database? [closed]

    How to apply SVG so that it works in IE background image

    How to put div block into right screen area using css?

    How to generate code for cross browser compatibility css in sublime or atom

    CSS accordion menu - How to expand and hyperlink

    How do I uncollapse a margin?

    How to enlarge an image horizontally in css?

    How to select via regex all class notations in css file

    How to disable webkit-text-size-adjust with JavaScript

    How to prevent the jump during css transition?

    How to get CSS font-weight to display?

    How to play specific keyframes with css animation

    CSS - how to make the iframe inside the div center aligned and the main div also center?

    How to selectively pass mouse events to underlying svg elements

    css/html how to make logo appear after heading

    How to select multiple elements using CSS

    how to control div size when other divs are changing [duplicate]

    How to apply CSS to td of particular table using Classname? [duplicate]

    CSS how to align elements

    How to re-animate CSS3 animations on class change

    How to resize a Java Script element to fit its container window

    How to vary shade of specific table row id

    Why are THs bolder than TDs and how to avoid it?

    How to align TH Header with TD in TBody

    How to make html elements move up/ down as image height resizes using only css and html

    How to recalculate css with jQuery window resize?

    How can i make the horizontal navigation menu center aligned

    How to CSS border spacing (or) padding background image separately?