CODEWITHSUNDEEP
htmlcss
evans
evans

Reputation: 563

Override css styles for a single element

For ol, ul, li in the project I havelist-style: none.

But in one place I need to specify the marking for the list. How can I do it?

I do so

<ul style="list-style: disk; !important">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

But it's not working

Upvotes: 3

Views: 4253

Answers (3)

rmagalhaess
rmagalhaess

Reputation: 383

Only changing the ; will not work, as you can see here

You need to specify the CSS for li elements:

.disc { list-style: disc; }

<ul>
    <li class="disc">1</li>
    <li class="disc">2</li>
    <li class="disc">3</li>
</ul>

Upvotes: 2

user663031
user663031

Reputation:

I would define a class for use on ul which sets the desired style on the li elements. Simply setting the list-style on the ul element's style attribute will not work, even if !important, because the higher-level definitions for li will take precedence. Remember that !important does not mean that child elements inherit the property "more strongly".

.disc li { list-style: disc; }

<ul class="disc">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

This approach will avoid having to set the list-style on each individual li element.

Upvotes: 0

Chathura Buddhika
Chathura Buddhika

Reputation: 2195

It should be corrected as below, 

<ul>
  <li style="list-style: disc !important">...</li>
  <li style="list-style: disc !important">...</li>
  <li style="list-style: disc !important">...</li>
</ul>
  1. !important is a part of the CSS rule. So it should be placed before ";"
  2. list-style should applied to the li element, not to ul

Upvotes: 1

Related Questions