Diego Eann Diego Eann - 3 months ago 12
CSS Question

exempt instance of html tag from formatting

If I have a linked style sheet that makes all

<ul>
elements to be formatted a certain way, then formatting in most instances of the
<ul>
would be correct - but not all.

Is there a way to exempt just one instance of an html tag from a linked stylesheet?

Answer

The C in CSS is for cascade, this means that every rule will be applied to every element that matches the selector and (depending on the rule nature) to its children. Here you can read more about it.

That being said the only way to prevent for a rule to be applied is to override it with a more specific rule. In case of equally specific rules, the last one being defined wins (this applies to both rules in the same .css and rules in a different file).

Finally, you can stop inheritance with the all property, but this could result in an unexpected behavior for its children if you (or somebody else) is not aware of this property being used.

Using background as an example property from the general formatting class .general-element, you have to override it with a more specific class (.specific-element):

.general-element {
  background: red;
}

.specific-element {
  background: yellow;
}

Nevertheless I think that the best way to deal with this cases is to make specific classes that do apply, this is achieved by defining specific classes instead of broad ones: it is an antipattern to format every <ul> tag and you should avoid that.

You don't want to be avoiding rules.