Question 118765 in CSS Question posted in
Some basic documentation can be found here.

CSS : selector ">" which selects direct children ….not working as expected…it is selecting all children when using color: property

In following code,

ul.veg-list>li is not working on expected lines after adding color property. It is coloring all li elements with red color whereas it should only color li which are direct children. However, in the same declaration box, list-style-type, font-size and padding is working as expected. Is there anything I am missing here?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-size: 16px;
        }

        .veg-list {
            border: 5px solid darkblue;
            width: 30%;
            padding: 20px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 2%;

        }

        ul.veg-list>li {
            list-style-type: none;
            font-size: 1.2rem;
            padding-left: 5%;
            color: red;

        }

        ul.veg-list>li ol li {
            margin-left: 6%;
            line-height: 200%;
        }

    </style>
    <title>Document</title>
</head>

<body>
    <ul class="veg-list">
        <li>Green Leafy Vegetables
            <ol>
                <li>Spinach</li>
                <li>Fenugreek</li>

            </ol>
        </li>
        <li>Fruits
            <ol>
                <li>Magno</li>
                <li>Banana</li>
                <li>Pineapple</li>
                <li>Lichi</li>
            </ol>
        </li>
        <li>Salads
            <ol>
                <li>Cucumber</li>
                <li>Carrot</li>
                <li>Raddish</li>
                <li>Onion</li>
            </ol>
        </li>
        <li>Herbs
            <ol>
                <li>Basil</li>
                <li>coriender</li>
                <li>Turmeric</li>
            </ol>
        </li>
    </ul>

</body>

</html>
Tags:

2

Answers


  1. 0

    Because the color act like this. When you apply red color to p tag and insert a span inside, the span will be red too. With the "color" property you are saying that the "text color inside of this element is this", which apply at all of the text inside the element, no matter if the text is in another element within the one with the color.

    If you want to apply the color only in the first level lis, you can wrap the text with one more tag (like p tag maybe) and then say ul.veg-list>li p {color: red;}, but better to have some unity classes (if it is only about the color) or specific class for the inner text in the first li (if there would be more specific styles for that text) and avoid this hard nesting.

    Other approach would be rewrite the color in nested lis, but again – the nesting..

    Login or Signup to reply.
  2. 0

    To stop the red being taken up by all the children (color is an inherited property) and if you don’t want to alter the HTML you could just reset all the child elements to their initial color value:

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-size: 16px;
    }
    
    .veg-list {
      border: 5px solid darkblue;
      width: 30%;
      padding: 20px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 2%;
    }
    
    ul.veg-list>li {
      list-style-type: none;
      font-size: 1.2rem;
      padding-left: 5%;
      color: red;
    }
    
    ul.veg-list>li * {
      color: initial;
    }
  }
  ul.veg-list>li ol li {
    margin-left: 6%;
    line-height: 200%;
  }
  </style>
  <title>Document</title>
</head>

<body>
  <ul class="veg-list">
    <li>Green Leafy Vegetables
      <ol>
        <li>Spinach</li>
        <li>Fenugreek</li>

      </ol>
    </li>
    <li>Fruits
      <ol>
        <li>Magno</li>
        <li>Banana</li>
        <li>Pineapple</li>
        <li>Lichi</li>
      </ol>
    </li>
    <li>Salads
      <ol>
        <li>Cucumber</li>
        <li>Carrot</li>
        <li>Raddish</li>
        <li>Onion</li>
      </ol>
    </li>
    <li>Herbs
      <ol>
        <li>Basil</li>
        <li>coriender</li>
        <li>Turmeric</li>
      </ol>
    </li>
  </ul>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search