CSS class applied before internal CSS class and not affecting SemanticUI button

Question

I have a strange problem

I'm trying to style a SemanticUI button, but the button's internal CSS is applied on top of my CSS class, and so none of my stylings are applied.

Note the top style is from semantic.min.css, while the style under it (being overridden) is defined in my own style tag

Also note: The ordering of the CSS in the header appears to be 'correct', or at least, my custom CSS comes after the SemanticUI import

I'm using SemanticUI React with CSS Modules, if that makes a difference.

How can I get my class applied over the top of semanticUI's button class?

In the <head> section, your custom css link should be after semantic ui css. Also you can make use of !important on your custom css. E.g. color: green !important; hope this works. — Michael Seltene
– Michael Seltene, Commented Dec 27, 2018 at 14:57
@MicSel The important tag works (and is new to me - thanks), but it's not what I would chose - I have to apply it to every declaration. I've added in a screenshot of the CSS import/declaration order in my 'head'. From what I understand, this -should- give my local stylings precedence over the default style, but thats not what's happening. — FrozenKiwi
– FrozenKiwi, Commented Dec 27, 2018 at 15:15
@MarkBaijens See the edits - the ui.button is from the SemanticUI css, and the custom class is defined in the style tag applied later in the head section, yet somehow the styles are applied in opposite order to the element — FrozenKiwi
– FrozenKiwi, Commented Dec 27, 2018 at 15:26

FrozenKiwi · Accepted Answer · 2018-12-27 15:52:31Z

2

It seems Semantic UI's selector has a higher specificity than yours, as it's selector is .ui.button it has two classes being selected, in contrast your selector is only one class, thus, less specific than the one from Semantic UI's stylesheet, try adding another class, id, or tag being more specific to that element so that your style applies correctly.

So for example, if semantic ui says .ui.button { } you can try .ui.button._31HHf.... { }

[edit]

For React with CSS Modules, we can combine classes with the following:

import styles from './index.module.css';
import cx from 'classnames';
...

      <Button className={cx(
        styles.ui,
        styles.button,
        styles.mainButton
      )}>LEARN MORE</Button>

edited Dec 27, 2018 at 15:52

FrozenKiwi

1,51315 silver badges30 bronze badges

answered Dec 27, 2018 at 15:35

IvanS95

5,8028 gold badges35 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

FrozenKiwi Over a year ago

Yes, this was it. I didn't realize that nested classes had higher specificity irregardless of import order. That's annoying and a bit confusing, but we can deal with it

IvanS95 Over a year ago

You can also use id as well, and that has higher specificity than any class, although its better practice to just stick with classes for CSS

FrozenKiwi Over a year ago

Yeah, I considered that but that would limit to a single element per rule, which wouldn't be very efficient

Rahul · Accepted Answer · 2018-12-27 15:03:11Z

1

based on image you have provided you can use

#app .container .(your highlighted selector)

so it will be for ex

#app .container ._31HHF..{
  color: red;
}

answered Dec 27, 2018 at 15:03

Rahul

4,3741 gold badge13 silver badges13 bronze badges

2 Comments

FrozenKiwi Over a year ago

The style is being applied, it's just applied below the default SemanticUI styling, and so is overridden by the default stylings

Mark Baijens Over a year ago

@FrozenKiwi Probably by a more specific selector. What selector overrides it?

Collectives™ on Stack Overflow

CSS class applied before internal CSS class and not affecting SemanticUI button

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related