.class element, why this doesn't do anything?

Question

I'm trying to learn css and I came by something I don't understand.

So I have this line of code in html:

<ul class="weblist">
    <li>Coffee Brur</li>
    <li>Taco Finder</li>
    <li>CSS Selector Finder</li>
    <li>HTML Formatter</li>
</ul>

And this line in css file:

.weblist ul {
  color: red;
}

And I wonder why it doesn't do anything. From what I get, it should take all the descendants of the unordered list with the weblist class, and apply them the red color, but it does nothing. I would like it to make all the list elements of this particular unordered list to appear red.

`.weblist ul` means *a `ul` nested inside an element with class `weblist`*… — deceze, Aug 10 '18 at 12:00
What ConsoleLog is suggesting is a selector that selects all `ul` elements *with* the class `weblist`. — Andrew Li, Aug 10 '18 at 12:04

score 1 · Answer 1 · answered Aug 10 '18 at 12:02

1

Use the following css

ul.weblist{
  color: red;
}

answered Aug 10 '18 at 12:02

Laura Landuyt

116
1
8

score 0 · Answer 2 · answered Aug 10 '18 at 12:01

0

You should apply it on the list item if you want to change the color of the text.

.weblist li {
color: red;
}

Edit: In this case it works, but the other solution to wrap another div around your list is maybe a better solution :)

answered Aug 10 '18 at 12:01

Wimanicesir

4,606
2
11
30

score 0 · Answer 3 · answered Aug 10 '18 at 12:03

.weblist ul means means that your ul is nested in an element that have weblist class. So to make your css work you need to write following HTML

your css:

.weblist ul {
      color: red;
    }

and HTML

<div class="weblist">
     <ul>
        <li>Coffee Brur</li>
        <li>Taco Finder</li>
        <li>CSS Selector Finder</li>
        <li>HTML Formatter</li>
      </ul>
    </div>

Hearner · Answer 4 · 2018-08-10T12:09:27.773

0

.weblist ul means to be apply to an ul element INSIDE a .weblist class element (here in my example, it's test)

.weblist ul {
  color: red;
}

ul.weblist { /* <- This is what you want */
  color: blue;
}

<ul class="weblist">
    <li>Coffee Brur</li>
    <li>Taco Finder</li>
    <li>CSS Selector Finder</li>
    <li>HTML Formatter</li>
    <li>
      <ul>
        <!-- here you have a <ul> inside weblist class element -->
        test
      </ul>
    </li>
  </ul>
And this line in css file:

edited Aug 10 '18 at 12:09

answered Aug 10 '18 at 12:03

Hearner

2,711
3
17
34

ul is not valid child of ul ... ul can only have li as child – Temani Afif Aug 10 '18 at 12:08

.class element, why this doesn't do anything?

4 Answers4