CODEWITHSUNDEEP
csscss-selectors
Abby Khan
Abby Khan

Reputation: 451

Styling child <li> using class selector

The title might be confusing. I had a question in my paper that said:

Write an HTML fragment to which the following CSS rule will apply:

li > .ext {

 color: blue; }

I answered it like :

<div class="ext">
  <ul>
    <li> This is a list item </li>
 </ul>
</div>

But later I thought it could be like:

<div >
  <ul class="ext">
    <li> This is a list item </li>
 </ul>
</div>

As the li is direct descendant of ul. But none of these worked. Can anybody explain the error? Thanks in advance :)

Upvotes: 1

Views: 985

Answers (3)

Tushar
Tushar

Reputation: 3052

I feel the reason it's not working is because there is some more powerful css selector exists than yours, means the existing css selector is taking priority.

Wrote an example for you, how this is happen: http://codepen.io/tusharbhatta/pen/dpqwAj Here a special top level div class 'bug' is taking the precedence over your code:

.bug ul li > span {
  color: red;
}

I would suggest to enable debug mode and select that li html and see which selector is being executed by the browser. That will give you the clue.

Upvotes: -1

Fergal Andrews
Fergal Andrews

Reputation: 314

I think you are misunderstanding the meaning of direct descendant. 

li > .ext

Means find the child element, one level down, that has a class of '.ext'.

A direct descendant will only look one level down. 

<ul>
    <li>This is a list item
        <p class="ext">This is what will be selected</p>
    </li>
</ul>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114990

Write an HTML fragment to which the following CSS rule will apply:

li > .ext {

 color: blue; }

It would be something like this:

<ul>
    <li> <span class="ext">This is a list item</span> </li>
 </ul>

The structure of the selector requires an element with a class of .ext that is a direct child (>) of an li.

30 CSS Selectors You Should Memorise

Upvotes: 2

Related Questions