CODEWITHSUNDEEP
htmlcsscss-selectorshtml-lists
Duncan Lukkenaer
Duncan Lukkenaer

Reputation: 13914

Styling only parent list

I have the following ordered list:

<ol>
    <li>
        <span>Title</span>

        <ol>
            <li>Info</li>
            <li>Info</li>
        </ol>
    </li>
</ol>

With CSS I need to apply styling to only the parent li, so only the 1. Title and not the child ol. How do I do this?

I have tried the following:

body > ol > li {
    /* Styling here */
}

and

body > ol > li > span {
    /* Styling here */
}

But neither gives the desired effect.

body > ol > li {
  font-weight: bold;
  font-size: 20px;
}


/* Additional styling */
ol { counter-reset: item; }
li { display: block }
li:before { content: counters(item, ".") ". "; counter-increment: item }
<body>
  <ol>
    <li>
      <span>Title</span>
      <ol>
        <li>Info</li>
        <li>Info</li>
      </ol>
    </li>
  </ol>
</body>

Fiddle

Upvotes: 0

Views: 49

Answers (4)

fnune
fnune

Reputation: 5494

Even though Blaze Sahlzen has the best answer, here's another possible solution:

https://jsfiddle.net/6mhajeLf/6/

Done by adding a class to the items that don't need to be bold and using !important. A little bit dirty, but it works.

.not-bold {
  font-weight:300 !important;
}

Upvotes: 0

Soubhik Mondal
Soubhik Mondal

Reputation: 2666

I added this CSS to your code:

span + ol {
  font-weight: initial;
  font-size: initial;
}


body > ol > li {
  font-weight: bold;
  font-size: 20px;
}

span + ol {
  font-weight: initial;
  font-size: initial;
}

/* Additional styling */
ol { counter-reset: item; }
li { display: block }
li:before { content: counters(item, ".") ". "; counter-increment: item }
<body>
  <ol>
    <li>
      <span>Title</span>
      <ol>
        <li>Info</li>
        <li>Info</li>
      </ol>
    </li>
  </ol>
</body>

Fiddle

Upvotes: 3

Sergiy T.
Sergiy T.

Reputation: 1453

If I correctly understand what you are trying to achieve, you need to declare

body > ol > li:first-child { color: #FFF; }
body > ol > li:first-child > ol { color:#000; }

See example: https://jsfiddle.net/6mhajeLf/4/

Upvotes: 0

Duncan Lukkenaer
Duncan Lukkenaer

Reputation: 13914

I suppose the only solution would be to reset the styling manually on the child ol like this:

ol ol {
  /* Reset styling */
}

Fiddle

Upvotes: 0

Related Questions