Overriding CSS Properties for a Specific HTML Element

Overriding CSS properties for a specific html element

That's a CSS specificity issue.

.main_section article has a higher specificity value than .special-bg selector.

In terms of value:
Inline Style > IDs > Classes, Attributes, and Pseudo-classes > Element Types and Pseudo-elements, So the calculation of Specificity of these two CSS selectors would be:

.special-bg

Inline Style    ID   (Pseudo-)Class    (Pseudo-)Element
0               0    1                 0

.main_section article

Inline Style    ID   (Pseudo-)Class    (Pseudo-)Element
0               0    1                 1

11 > 10 => .main_section article selector wins!

You could use the following:

.main_section .special-bg {
  /* Styles goes here... */
}

Override css styles for a single element

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>

!important is a part of the CSS rule. So it should be placed before
";"
list-style should applied to the li element, not to ul

Override CSS styles set for HTML tag

Add a class to the html element and then use some inline styling to override the external stylesheet's styling. You could also place the inline style in an external style sheet which would be best practice.

<html class="myHtmlTag">
   <head>
     <link href="externalStyle.css" rel="stylesheet"/>
    <style>
     html.myHtmlTag{
       background: none !important;
       background-image:none !important;
     }
    </style>
   </head>
   <body></body>
</html>

Override css style of an element given by id

It depends on a few things. But actually you add the same selector with style you want just a few lines later and it will work. As CSS says, it cascades from top to bottom. So if specificity is the same the last rule will be taken/added to the previous set rules. Also if you include entire CSS files.

#lb {   width:100px;   background-color: green;}
#lb {    background-color: orange;}

<label id="lb">Label1</label>

CSS class override property behaviour

It's the latter. Cascade resolution is on a per-property basis. If the color property exists somewhere with higher precedence (in this case, the internal stylesheet), then that property is cascaded to the more precedent one. The rest of the properties carry over because no more precedent declarations exist.

Interestingly, the CSS2.1 spec seems to conflate "style rules" and style declarations, in section 6.4. This may be a source of confusion. The subsection 6.4.1 clarifies this by referring only to property declarations.

Override element.style using CSS

Although it's often frowned upon, you can technically use:

display: inline !important;

It generally isn't good practice but in some cases might be necessary. What you should do is edit your code so that you aren't applying a style to the <li> elements in the first place.

CSS * overriding class style

Try making your CSS rule more specific. For example if your .error-list is made of li tags. Change your CSS rule to .error-list li to make it more specific.

how to override a css class without affecting other classes with the same name

There are multiple ways you can approach this. One, you can create an id for that HTML tag that you want add'l/different style and create a #<id_name> in your css to handle that style or add another classname in front of container for the one you want to style. Or you can use CSS specificity for the nth child render this add'l style.

Approach 1)

HTML

<tagname id="other_css" class="container" ...>

CSS

#other_css {
  // css stuff
}

Approach 2

HTML

<tagname class="container other_css" ...>

CSS

.other_css {
  ...
}

.container {
  ....
}

Approach 3

HTML

<wrapper>
  <tagname class="container ...>
  <tagname class="container ...>
  <tagname class="container ...> <- the one you care about 
</wrapper>

CSS

wrapper:nth-child(3) {
  ...
}

Resources:
- https://www.w3.org/TR/selectors-3/#specificity

Overriding CSS Properties for a Specific HTML Element