CODEWITHSUNDEEP
htmlcss
Sandoval0992
Sandoval0992

Reputation: 1367

CSS "child" selector behaves like a "descendant" selector

I'm trying to apply some CSS styles on a very basic html demo in order to get this result. (Only Item 1.1 and Item 1.2 as lowercase letter)

These are the html and css code snippets.

index.html

<ul id="list">
    <li>Item 1
          <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
          </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

styles.css

ul#list > li{
    text-transform: uppercase;
}

Which gives me the following result.

So as you can see the text-transform property is been applied on every li element even though ITEM 1.1 and ITEM 1.2 are not direct children of ul#list

This seems to be like the behavior of a descendant selector:

ul#list  li{
    text-transform: uppercase;
}

Upvotes: 0

Views: 54

Answers (2)

Delowar Hossain
Delowar Hossain

Reputation: 385

This is because you did not specify any NORMAL CSS for <li>

You can simply achieve this by above ul#list > li

li { text-transform: none; }

Please refer to this for details: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

Upvotes: 1

codesayan
codesayan

Reputation: 1715

text-transform is an inherited property. Specifying it on a parent also copies it down to children. Obvious, Just because you didn't set any primary property for child elements. So by default its taking that property as primary ,

ul#list > li{ text-transform: uppercase; }

ul#list li {
  text-transform: none;
}

ul#list>li {
  text-transform: uppercase;
}
<ul id="list">
  <li>Item 1
    <ul>
      <li>Item 1.1</li>
      <li>Item 1.2
        <ul>
          <li>Item 1.1.1</li>
          <li>Item 1.2.1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Upvotes: 2

Related Questions