Question 265004 in CSS Question posted in
Some basic documentation can be found here.

css with child selectors superceding later css file

I have a website where certain decorative elements are provided both by the regular site css and in some cases a custom css file that is linked after that regular file:

 <link rel="preload" href="../../responsive.css" as="style" onload="this.rel='stylesheet'">
 <!--surface-->
 <link rel="preload" href="custom.css" as="style" onload="this.rel='stylesheet'">

I am considering adding a button that will eliminate some of the decorative elements provided by both responsive.css and custom.css via a call to a Javascript function. The way I’m planning on implementing this is by having stylesheet load, but be disabled, so that it would be the latest in the stack. This stylesheet is formatted as follows:

 <link rel="preload" href="../../decoration_suppress.css" as="style" onload="this.rel='stylesheet'" disabled="disabled">

As a test, I inserted the line into a development file and then deleted disabled="disabled" in the inspector in Firefox. It worked as I expected except for this one bit of CSS I have on one particular version of custom.css:

div[zonenum="EETS.QD.I"] > div.line > span.underline {
  text-decoration: underline overline red;
}

This one piece of code ignores the fact that I have changed text-decoration to none in span.underline. I’m assuming that is because it’s very specific and refers to a child of a child on the page, but I’m not sure. Is that right, and if it is is there a way to get browsers to respect span.underline in decoration_suppress.css as opposed to custom.css? I can’t toggle one that one like I do decoration_suppress.css because there are certain custom font-size’s and layout issues that I need to use either way.

And yes, I know there’s probably more elegant way of doing this by standardizing style in a single css file, but my use case is trying to mimic medieval manuscript pages and they don’t always follow the same stylistic patterns.

Tags:

2

Answers


  1. 0

    You are right. For the .underline class you can add !important if you want to overwrite the specific selector

    Login or Signup to reply.
  2. 0

    That’s called specifity in CSS.

    Certain selectors have more "weight" than others, and the same goes for combined selectors – the more parts a combined selector consists of, the more specific it becomes, still depending on the used selectors (tags, classes, IDs, pseudo classes etc.).

    The resulting specifity overrules the order of CSS rules in stylesheets – the order is only important if two selectors have exactly the sam specifity.

    As a "last resource" to override more specific rules you can always add !important to the value, but in general this is not recommended.

    You can read a complete article about it including what has higher specifity here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search