Unable to supersede CSS styling

Question

Unable to supersede CSS styling

HTML

<div class="dlrs">
    <div id="listItems">
        <div id="clrCode" class="colorBlock" 
             style="background-image: url("/media/images/orange.png"); background-position: center center; background-repeat: no-          repeat;">
        </div>
        <span>0 pts ( > 20 min)</span>
        <ul id="dlrsList">
            <li id="itmDlrName">Crosstown Auto Centre</li>
            <li id="itmDlrName">Dartmouth Chrysler Jeep Dodge</li>
            <li id="itmDlrName">Grande Prairie Chrysler Jeep Dodge</li>    
        </ul>
    </div>
</div>

CSS

.dlrs {
    //display: inline-block;
    width: 630px;
    margin: 20px 0 20px 20px;
    font-weight: @bldTxt;
    font-size: 14px;

    #listItems {
        width: 200px;
        float: left;
        display: inline-block;

        span {
            position: relative;
            bottom: 16px;
            left: 20px;
        }

        #dlrsList {
            width: 100%;
            text-align: justify;
        
            #itmDlrName {
                padding: 0px;
                list-style-type:disc;
                position: relative;                
                left: 20px;                
                max-width: 160px;
                font-size: 12px;
            }
        }
    }
}

The issue at hand revolves around achieving bullet points on my li elements. Despite various attempts to override the CSS setting that removes the bullets using none, I have not been successful. Even with increased specificity and the use of !important, the desired effect is not achieved. However, when altering the settings in FireBug temporarily, the expected disc property for li works correctly.

Is there a workaround that can be implemented in this situation?

html css

Answer 1

Answer №1

If you're looking for a way to style your elements with SASS, SCSS, or LESS instead of plain CSS, make sure to run it through a preprocessor before using it.

Keep in mind that if you prefer using standard CSS, avoid nesting selectors as shown in the example.

EDIT

Given the presence of a variable like @bldTxt which equals to bold, it's clear that the user is intentionally utilizing a preprocessor. Therefore, the resulting CSS based on this assumption is:

.dlrs {
    width: 630px;
    margin: 20px 0 20px 20px;
    font-weight: bold;
    font-size: 14px
}

.dlrs #listItems {
    width: 200px;
    float: left;
    display: inline-block
}

.dlrs #listItems span {
    position: relative;
    bottom: 16px;
    left: 20px
}

.dlrs #listItems #dlrsList {
    width: 100%;
    text-align: justify;
    list-style-type: disc; /* Move this line from here */
}

.dlrs #listItems #dlrsList #itmDlrName {
    padding: 0;
    position: relative;
    left: 20px;
    max-width: 160px;
    font-size: 12px
}

To correct the CSS, simply reposition the list-style-type : disc; property from

.dlrs #listItems #dlrsList #itemDlrName

to .dlrs #listItems #dlrsList.

Answer 2

If you're looking for a way to style your elements with SASS, SCSS, or LESS instead of plain CSS, make sure to run it through a preprocessor before using it.

Keep in mind that if you prefer using standard CSS, avoid nesting selectors as shown in the example.

EDIT

Given the presence of a variable like @bldTxt which equals to bold, it's clear that the user is intentionally utilizing a preprocessor. Therefore, the resulting CSS based on this assumption is:

.dlrs {
    width: 630px;
    margin: 20px 0 20px 20px;
    font-weight: bold;
    font-size: 14px
}

.dlrs #listItems {
    width: 200px;
    float: left;
    display: inline-block
}

.dlrs #listItems span {
    position: relative;
    bottom: 16px;
    left: 20px
}

.dlrs #listItems #dlrsList {
    width: 100%;
    text-align: justify;
    list-style-type: disc; /* Move this line from here */
}

.dlrs #listItems #dlrsList #itmDlrName {
    padding: 0;
    position: relative;
    left: 20px;
    max-width: 160px;
    font-size: 12px
}

To correct the CSS, simply reposition the list-style-type : disc; property from

.dlrs #listItems #dlrsList #itemDlrName

to .dlrs #listItems #dlrsList.

Answer 3

Answer №2

Embrace the power of classes in your HTML markup:

Here is an example:

<ul class="carDealershipList">
    <li class="dealerNameItem">Sunset Motors</li>
    <li class="dealerNameItem">Oakwood Auto Sales</li>
    <li class="dealerNameItem">City Auto Exchange</li>
</ul>

And here's how you can style it using CSS:

.carDealershipList {
    ...
    list-style-type: circle;
}

Answer 4

Embrace the power of classes in your HTML markup:

Here is an example:

<ul class="carDealershipList">
    <li class="dealerNameItem">Sunset Motors</li>
    <li class="dealerNameItem">Oakwood Auto Sales</li>
    <li class="dealerNameItem">City Auto Exchange</li>
</ul>

And here's how you can style it using CSS:

.carDealershipList {
    ...
    list-style-type: circle;
}

Answer 5

Answer №3

attempting

li { list-style-type: none !important; }

I have modified your ul to li The use of !important will ensure the style is enforced.

Answer 6

attempting

li { list-style-type: none !important; }

I have modified your ul to li The use of !important will ensure the style is enforced.

Answer 7

Answer №4

To address the issue, one solution is to follow the recommendation of Ankit Agrawal and utilize the '!important' approach. Alternatively, you could rearrange your css code so that it comes directly after the 'ol, ul { list-style-type: none; }' code. By doing this, your custom css will take precedence over the conflicting code causing the problem.

Personally, I tend to opt for the latter option as it eliminates the need for excessive use of '!important' whenever possible.

Answer 8

To address the issue, one solution is to follow the recommendation of Ankit Agrawal and utilize the '!important' approach. Alternatively, you could rearrange your css code so that it comes directly after the 'ol, ul { list-style-type: none; }' code. By doing this, your custom css will take precedence over the conflicting code causing the problem.

Personally, I tend to opt for the latter option as it eliminates the need for excessive use of '!important' whenever possible.

Answer 9

Answer №5

list-style-type: disc !important;

Applying !important to override CSS styles

Answer 10

list-style-type: disc !important;

Applying !important to override CSS styles

Answer 11

Answer №6

Sure thing, give this a go

.dlrsList { list-style-type: disc; }

Alternatively, you can delete

ol, ul { list-style-type: none; }

from your CSS file. If you have multiple lists on your website, make sure to assign each list its appropriate CSS property for list-style-type.

Answer 12

Sure thing, give this a go

.dlrsList { list-style-type: disc; }

Alternatively, you can delete

ol, ul { list-style-type: none; }

from your CSS file. If you have multiple lists on your website, make sure to assign each list its appropriate CSS property for list-style-type.

Answer 13

Answer №7

Within your css, the property list-type:disc is being used.

#dlrsList {
    list-style-type: disc;
}

Simply adding an id will provide enough specificity to apply the desired style.

Update

An id needs to be added to the ul element. Currently, it is only set as a class named dlrslist, which is why the styles are not being applied.

HTML

<ul id="dlrslist">
</ul>

CSS

#dlrsList {
    list-style-type: disc;
}

Final Update

Ensure that list-style-type:disc is set on the ul element and not on the li.

#dlrsList {
    list-style-type: disc;
}

Avoid

#dlrsList {
    #itmDlrName {
        list-style-type: disc;
    }
}

Answer 14

Within your css, the property list-type:disc is being used.

#dlrsList {
    list-style-type: disc;
}

Simply adding an id will provide enough specificity to apply the desired style.

Update

An id needs to be added to the ul element. Currently, it is only set as a class named dlrslist, which is why the styles are not being applied.

HTML

<ul id="dlrslist">
</ul>

CSS

#dlrsList {
    list-style-type: disc;
}

Final Update

Ensure that list-style-type:disc is set on the ul element and not on the li.

#dlrsList {
    list-style-type: disc;
}

Avoid

#dlrsList {
    #itmDlrName {
        list-style-type: disc;
    }
}

Unable to supersede CSS styling

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Update

Final Update

Similar questions

Creating borders on columns of equal height using Bootstrap's flex feature

Use jQuery to toggle a div inside another div when hovered over

Displaying the React input text currently

Choose a radio button with a dynamic value in Selenium

Tips for adjusting large resolution images to fit all screen sizes without exceeding the boundaries of the screen

Sending authorization codes to web pages

PHP not receiving POST information from $.ajax call

Rvest returning "dash"

Is there a way to eliminate the return?

I am looking to place two HTML buttons next to each other on the same line

jQuery templates sometimes display conditions as commas only in Internet Explorer

Adjustable Columns in Bootstrap Table

Having trouble getting CSS media query to work in my Rails mailer template

What is the best way to add two popups to a marker in Leaflet? One triggered by mouseover and another by a click event?

cannot display static css files in an express jade template

The JSON ticker for BTC/LTC has stopped functioning

Utilizing a two-column design, position the third sibling element without relying on margins

Arranging buttons within a div container with JavaScript exclusively

Is there an issue with the way Angular's two-way binding behaves on my form list?

Retrieving raw PCM data from webAudio / mozAudio APIs