CODEWITHSUNDEEP
htmlcss
Sinaydavid
Sinaydavid

Reputation: 1

Apply css rule only to parent

I have the following code:

<div id="sidebar" style="float:right;">
<li id="test" class="widget woocommerce widget_product_categories">
<ul class="product-categories">
<li class="cat-item cat-item-45 current-cat cat-parent">
<ul class="children">
<li class="cat-item cat-item-76"></li>
<li class="cat-item cat-item-77"></li>
<li class="cat-item cat-item-78"></li>
<li class="cat-item cat-item-79"></li>
<li class="cat-item cat-item-80"></li>
<li class="cat-item cat-item-81"></li>
</ul>
</li>
</div>

I would like to applay the css rule:

background-color:red;

only to the li with the .current-cat class

So far i have managed to applay this rule to the all li whiche contain another ul inside so i get a big bulk of red instaed only the current li iI used this rule:

ul > li.current-cat{background-color:#F98562;}

EDIT with Vitorino Fernandes help i managed getting TO THIS as you can see the red line is still on the left side of the not choosen li.

Upvotes: 0

Views: 1515

Answers (2)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

you have some unclosed tags

the .cat-item also takes the height of the .current-cat so the children will also take the background of parent

set different background for sub-sub li like in the example

demo - http://jsfiddle.net/victor_007/5mff7Lj9/

Edit

added pseudo element :before for list styling as per your comment

demo - http://jsfiddle.net/victor_007/5mff7Lj9/3/

* {
  /* margin:0;
    padding:0;*/
}
ul {
  margin: 0;
  /*list-style:none;*/
}
ul > li.current-cat {
  background-color: #F98562;
}
ul ul > li.current-cat li {
  background-color: white;
}
ul > li.current-cat ul {
  padding: 0px;
  list-style: none;
}
ul > li.current-cat ul li {
  padding-left: 35px;
  position: relative;
}
ul > li.current-cat ul li:before {
  content: '\25AA';
  position: absolute;
  left: 14px;
}
<div id="sidebar">
  <ul>
    <li id="test" class="widget woocommerce widget_product_categories">test1
      <ul class="product-categories">
        <li class="cat-item cat-item-45 current-cat cat-parent">test2
          <ul class="children">
            <li class="cat-item cat-item-76">test3</li>
            <li class="cat-item cat-item-77">test4</li>
            <li class="cat-item cat-item-78">test5</li>
            <li class="cat-item cat-item-79">test6</li>
            <li class="cat-item cat-item-80">test7</li>
            <li class="cat-item cat-item-81">test8</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Upvotes: 1

piers
piers

Reputation: 181

Try validating your HTML. You will find that it is not valid. The only valid child of <ul> is <li>, and you are not allowed to have a <li> inside a <div>.

Source: http://www.w3.org/TR/html-markup/li.html#li-context

Write like the following and your CSS should work:

<ul>
    <li class="current-cat"></li>
</ul>

Upvotes: 1

Related Questions