WordPress.org

1. goldfish654
   Member
   Posted 6 years ago #

   So, I'm halfway through making a theme.

   I've got to a point where I'm adding the sidebar bits to the theme. What I want is a number of seperated tabs vertically for each "main heading" in the sidebar. i.e. one for Pages, Categories, Links - whatever.
   Have a diagram

   Now, how do I reference just the first level of LI tags in CSS? Or the H2 in each LI, and then the UL beneath it. I don't want it to cascade through the elements within it. I want the first H2 to be orange, but I can't reference to that without affecting subordinate H2's (for example Link Categories in the Links tab).

   I could change the markup to make it easier (add some classes to the LI's I have control over) but I'd rather not. Is there a better solution?

2. petit
   Member
   Posted 6 years ago #

   You can address any element (id) ore element class ( implicit or explicit like this:
   #sidebar .col ul li {
font-size:0.8em;
}

   This will adress any li contained in the first ul under the div of class="col" in a div with the id="sidebar".

   In effect we are climbing down the DOM ladder from the #sidebar div, and for all elements of the col class we look in every ul for a li and give it a style.

   Now this style will normally propagate down to any elements within that li. To stop this we have to give styles to those inner elements to.

   That's my take on the matter any way

Topic Closed

This topic has been closed to new replies.