homepage Welcome to WebmasterWorld Guest from 54.146.175.204
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Apply styles to parent and not child
greencode

5+ Year Member



 
Msg#: 4621261 posted 12:18 pm on Nov 5, 2013 (gmt 0)

I have a menu with dropdown submenu. The parent items are styled differently to the children but how do I do that without having to overide the parent styles on the children?

For example in the code below I don't want the children to have a hover colour and the padding and line-height of the parent. How do I specify this without having to write all of that css again for the children?

Thanks in advance for any help.


<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
div#container ul li {
text-decoration: none;
color: #33322a;
line-height: 57px;
display: inline-block;
padding: 0 12px;
}
div#container ul li:hover {
color: blue;
}
</style>
</head>

<body>
<div id="container">
<ul>
<li> Parent List Item
<ul>
<li> Child List Item </li>
</ul>
</li>
<li> Parent List Item </li>
<li> Parent List Item </li>
<li> Parent List Item </li>
</ul>
</div>
</body>
</html>

 

brandozz



 
Msg#: 4621261 posted 12:49 pm on Nov 5, 2013 (gmt 0)

Styling the id selector should be avoided if you can, there are many drawbacks to styling the id. One being that if will cause you to have to be very specific with your classes and it's not reusable.

With that being said, the child list will inherit the styles of the parent regardless. I would give each one classes maybe "menu" and "submenu" and style from there.

greencode

5+ Year Member



 
Msg#: 4621261 posted 12:56 pm on Nov 5, 2013 (gmt 0)

Hi @brandozz, thanks for your help with this. I'd just this second applied classes for the main menu items and styled them accordingly so the children didn't get styled as well. Thanks again.

brandozz



 
Msg#: 4621261 posted 1:02 pm on Nov 5, 2013 (gmt 0)

@greencode no problem

drhowarddrfine

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4621261 posted 5:00 pm on Nov 5, 2013 (gmt 0)

It should be noted that there are no problems styling id and the whole purpose of using id on an element is because it's not reusable.

Being careful with id and classes inside it is no different than being careful with anything. It's a trend, lately, to tell people not to use id on elements. While I agree that using id should be limited, one should not fear using it.

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4621261 posted 10:34 pm on Nov 5, 2013 (gmt 0)

Incidentally, the short answer to the question posed in the thread title is

.foobar {stuff-here}
.foobar * {opposite-stuff-here, with emphasis on "auto" "none" and "normal" (but not "inherit"!)}

though you should replace * with a short list of only those things that actually occur within foobar-- say p, div, ul.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved