-1

I have this rule:

* {background-color:#ddd;font-family: Arial,Helvetica,sans-serif;font-size:13pt}

Unfortunately, it imposes the font-size on a < span > element. I want the span to continue to have no default rules so I can use it to change text color, etc.

My * rule has the lowest priority, which is good since * is used to set default values, which we want overridden easily. However, it applies to the span rule, which makes span erroneously include its styles. Span should be used to apply specific styles, not the default styles.

David Spector
  • 1,520
  • 15
  • 21
  • we talk about specificity when there is at least two selectors involved, if you apply only one rule it will logically apply whataver the specifity is. – Temani Afif Nov 27 '18 at 21:49
  • I clearly explained that there were two rules, one for * and one for span. – David Spector Nov 28 '18 at 02:06
  • This question isn't a duplicate because I didn't realize that excluding span from the universal selector was even possible and because it was a solution to the problem of * taking priority over all other rules, which is in my opinion a bug in css. – David Spector Nov 28 '18 at 02:10
  • it's not a bug, `*` is a selector and it means select everything (inlcuding span) and if you already have a `span` selector it will have a higher specifity and won't get affected by `*` (ex: https://jsfiddle.net/3ajnLy59/) and this is a duplicate because you simply used the `not()` feature which is something well known and has nothing special with the `*` or any other selector. So if you asked the question and you didn't answer it I would have closed with the same duplicate because the answer is clear "you need to consider not() selector to exclude something from your selector" – Temani Afif Nov 28 '18 at 08:25
  • I just experimented and found that you are correct: the span rule takes priority over the * rule. However, that would mean that I would have to manually patch the span rule to re-establish its correct size for each specific context in which its size was incorrect. Using :not was the perfect solution but was not evident from web searching for such situations. I thought that posting in StackOverflow would advise others who found span changed by * how to correct this specific problem. I will now edit my question and answer to make this more clear. – David Spector Nov 28 '18 at 14:22
  • Please remove the "duplicate" notice, as this question is not the same as the other one. This one is specific to the problem with using * with span, which is what people will search for. I know it is what I searched for, along with priority problems. This turned out not to be a priority problem at all, but I had to figure that out for myself. I'd like to save others the trouble. CSS is way too complicated and we should try to help people with it. – David Spector Nov 28 '18 at 14:29
  • we don't close as duplicate for the exact same problem. All the problem are different and very specific but your issue is a generic one that involves the use of the not() selector. We don't care about the situation when at the end the solution and the issue are the same. you want to exclude something from your selector and the answer is the use of not() like the duplicate and like many other duplicates. – Temani Afif Nov 28 '18 at 14:37
  • as a side note, the use of `*` like this is a very bad way to do thus all the issues you are having so I advise you to never use it like that (And I am not the downvoter of your question/answer) – Temani Afif Nov 28 '18 at 14:38
  • I guess (since you didn't say) that the alternative to using * to set the background color (for example) is to list all the tags that you want to set and specify their background color. Then you don't need *. But the problem with this is that the average designer (me) doesn't know in advance without time-consuming research what this list should be. So a universal rule does what I want without my having to research the issue.CSS is unduly complex – David Spector Nov 28 '18 at 18:29

1 Answers1

-1

Use the :not pseudoselector to exclude span, as follows:

:not(span) {background-color:#ddd;font-family: Arial,Helvetica,sans-serif;font-size:13pt}
David Spector
  • 1,520
  • 15
  • 21
  • 1
    this won't help you a lot because font properties are inherited, so it will get applied to span element – Temani Afif Nov 27 '18 at 21:47
  • It helps a lot because it works perfectly. It gives the desired background color and other defaults to all elements without causing spans to meddle with the font size. Please be sure you read the question carefully. You can't inherit something if you are excluded from the rule. – David Spector Nov 28 '18 at 14:31
  • 1
    check this: https://jsfiddle.net/ov3480aq/4/ and don't worry I read question carefully but be sure to verify things by your self too. Font properties are inherited. As you can see in the code I excluded span and it get the same font-size. Why? because it has inherited the value. – Temani Afif Nov 28 '18 at 14:34
  • Your fiddle is not the situation I am discussing. Change it to: ----

    test some text

    ---- * { font-size:60px; } h2 {font-size:12px} ----     – David Spector Nov 28 '18 at 18:35
  • And see how the * font size overrides the span! Is it clear now? – David Spector Nov 28 '18 at 18:37