CODEWITHSUNDEEP
htmlcss
JimmB
JimmB

Reputation: 25

Overriding the UL Bullets Styling For One Specific List

I'm working on a website where the default CSS specifies:

    ul li {
      list-style: none;
    }

This is necessary to keep the navigation bar clean (which is coded as an unordered list, basically) ...

Now, in the body of text on a particular page, I want to add a standard unordered list. So in a separate CSS sheet that exists for customizations, I added:

    ul.about-page {
        list-style-type: circle;
    }

And then on the page where I want the unordered list, I added this to the HTML:

    <ul class="about-page">
       <li>Some text</li>
    </ul>

I also tried some variations of the above, but in all cases it wasn't working. Instead no bullets were showing up (though the text was indented as expected).

Note: the most complicated thing I tried was to add the following to the custom stylesheet:

    ul.about-page li::before {
      content: "\25E6";
      color: black;
      display: inline-block;
      width: 1em;
      margin-left: -0.9em;
      font-weight: bold;
      font-size: 1.1em;
    }

And then on the page where I want the unordered list, I entered this HTML:

    <ul class=“about-page”>
    <li>Some text</li>
    </ul>

I was hoping that this — or some similar version of it — would work. But it also does not.

I'm sure there must be a way to do this, but after spending at least an hour searching online and trying various things, I can't seem to figure it out.

Any advice will be much appreciated!

Upvotes: 1

Views: 1078

Answers (1)

MBadrian
MBadrian

Reputation: 409

when you use class it is have More priority but when you use Address Model Selector like ul li it has more than priority of class then you must use this code 

 ul li {
          list-style: none;
        }
 ul.about-page li {
        list-style-type: circle;
    }
<ul>
  <li>Item 11</li>
  <li>Item12</li>
  <li>Item13</li>
</ul>

<ul class="about-page">
  <li>Item 11</li>
  <li>Item12</li>
  <li>Item13</li>
</ul>

Upvotes: 3

Related Questions