Discussions Search    Reviews    Search Aid    Buzzzz    Google@Omgili    Q&A    Health Add to iGoogle   Bookmark and Share

  Advanced Search

Welcome to Omgili,
Omgili (Oh My God I Love It ;) is a search engine for discussions. With Omgili you can find answers and solutions, debates, discussions, personal experiences, opinions and more... To learn more about Omgili click here.

This is a complete preview of the discussion as it was indexed by Omgili crawlers. Use this preview if the original discussion is unavailable.
Click here to view the original discussion.
[http://www.codingforums.com/showthread.php?t=145...]
Click here to search for discussions with Omgili discussions search engine.

outer class overrides inner class? - CodingForums.com

I'm trying to style a specific link within a sidebar and it's not working. My html looks something like this: <div id="sidebar" class="sidebar-right"> then, within this div I have something like: <li class="sidebar-different"></li> I don't know where my problem is but the "sidebar-right" class seems to be overriding the "sidebar-different" class. Anyone know why this is?

Could you post a link to your page and specify exactly which CSS rule is getting overriden?

This site is not yet active, but the following is the exact html and style sheet HTML: <div id="sidebar-1" class="sidebar"> <ul> <h2>_Fresh <span class="grey">Comments</span></h2> <ul> <?php get_recent_comments('limit=10');

?> </ul> the browser displays each of the comments according my ul/li elements in the "sidebar" class, which looks like this: .sidebar ul { margin: 0; padding: 0; list-style-type: none; } .sidebar ul ul { margin: 1.0em 0 1.5em 0; border-top: 1px solid #dee4da; } .sidebar ul ul li { padding: 0 0 0 10px; border-bottom: 1px solid #dee4da; } .sidebar ul ul li a { margin: 0 0 0 -10px; padding: 2px 10px 0 10px; } .sidebar ul ul li a:hover { background-color: #f3f3f3; } I want to leave these settings the way they are because I want the other lists in the sidebar to appear this way.

However, I only want the comment list to style differently. So I created another class in my style sheet that was identical to the one above and just named it something different (sidebar-comments, or something) and then modified the HTML to read: <ul class="sidebar-comments"> <?php get_recent_comments('limit=10');

?> </ul> Didn't work.

Any ideas?

.sidebar ul selects all the lists inside that <div>

Having class="sidebar" However you can set a different style for the "sidebar comments" by rules like Code: ul.sidebar-comments{ } ul.sidebar-comments li{ } ul.sidebar-comments li a{ } etc.

Hmm... it doesn't seem to make any difference.

This is my exact code modified to your specifications: stylesheet: .sidebar ul { margin: 0; padding: 0; list-style-type: none; } .sidebar ul ul { margin: 1.0em 0 1.5em 0; border-top: 1px solid #dee4da; } .sidebar ul ul li { padding: 0 0 0 10px; border-bottom: 1px solid #dee4da; } .sidebar ul ul li a { margin: 0 0 0 -10px; padding: 2px 10px 0 10px; } .sidebar ul ul li a:hover { background-color: #f3f3f3; } ul.sidebar-comments ul { margin: 0; padding: 0; list-style-type: none; } ul.sidebar-comments ul ul { margin: 1.0em 0 1.5em 0; border-top: 1px solid #dee4da; } ul.sidebar-comments ul ul li { padding: 0 0 0 10px; border-bottom: 1px solid #dee4da; } ul.sidebar-comments ul ul li a { margin: 0 0 0 -10px; padding: 2px 10px 0 10px; } ul.sidebar-comments ul ul li a:hover { color: #666; } HTML: <div id="sidebar-1" class="sidebar"> <ul> <li> <h2>_Fresh <span class="grey">Comments</span></h2> </li> <ul class="sidebar-comments"> <?php get_recent_comments('limit=10');

?> </ul> You'll notice I'm only trying to change the a:hover element.

I also will eventually change margins and padding, but I was starting with this aspect...




Omgili Home About FAQ Plugins Usenet