CODEWITHSUNDEEP
css
Frank G.
Frank G.

Reputation: 1579

Grouping your CSS classes to streamline your stylesheet

Here is my Problem I am making a nav bar with drop downs. I already have a class for all li in a list. Here is the CSS for that.

#menu li:hover {
    border: 1px solid #777777;
    padding: 4px 5px 4px 5px;
}

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px; 
    color: #EEEEEE;
}

#menu li:hover a {
    color:#161616;
}

Here is how this implemented.

<ul id="menu">
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 2</a></li>

I want to create a Class called nodropdown using the css above. This is how I formated it but I don't think I did it correctly.

#menu li.nodropdown :hover {
    border: 1px solid #777777;
    padding: 4px 5px 4px 5px;
}

#menu li.nodropdown a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px; 
    color: #EEEEEE;
}

#menu li.nodropdown :hover a {
    color:#161616;
}

And I want to be able to call nodropdown class and override Button 2 like this:

<ul id="menu">
    <li><a href="#">Button 1</a></li>
    <li class="nodropdown"><a href="#">Button 2</a></li> 
    <li><a href="#">Button 2</a></li>

But I don't think the way I formatted the class for nodropdown is correct right above is correct? Could you help me corrected please?

Upvotes: 2

Views: 92

Answers (1)

Glyn Jackson
Glyn Jackson

Reputation: 8354

The idea of grouping is to group CSS classes/IDs together and then only list out common attributes once for example. 

/* Attributes for all boxes */
td.Box1, td.Box2, td.Box3 {padding: 3px 6px; font-weight: bold}

/* Unique box attributes */
td.Box1 {background: #fff}
td.Box2 {background: #000}
td.Box3 {background: #ccc}

Upvotes: 2

Related Questions