CSS class applied before internal CSS class and not affecting SemanticUI button
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?
css semantic-ui react-css-modules
asked Dec 27 '18 at 14:50
FrozenKiwi
595216
add a comment |
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?
css semantic-ui react-css-modules
asked Dec 27 '18 at 14:50
FrozenKiwi
595216
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.
– Mic Sel
Dec 27 '18 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
Dec 27 '18 at 15:15
What is the selector that overides your css?
– Mark Baijens
Dec 27 '18 at 15:17
@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
Dec 27 '18 at 15:26
add a comment |
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?
css semantic-ui react-css-modules
asked Dec 27 '18 at 14:50
FrozenKiwi
595216
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?
css semantic-ui react-css-modules
css semantic-ui react-css-modules
asked Dec 27 '18 at 14:50
FrozenKiwi
595216
asked Dec 27 '18 at 14:50
FrozenKiwi
595216
edited Dec 27 '18 at 15:23
asked Dec 27 '18 at 14:50
FrozenKiwi
595216
asked Dec 27 '18 at 14:50
FrozenKiwi
595216
asked Dec 27 '18 at 14:50
FrozenKiwi
595216
595216
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.
– Mic Sel
Dec 27 '18 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
Dec 27 '18 at 15:15
What is the selector that overides your css?
– Mark Baijens
Dec 27 '18 at 15:17
@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
Dec 27 '18 at 15:26
add a comment |
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.
– Mic Sel
Dec 27 '18 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
Dec 27 '18 at 15:15
What is the selector that overides your css?
– Mark Baijens
Dec 27 '18 at 15:17
@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
Dec 27 '18 at 15:26
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.
– Mic Sel
Dec 27 '18 at 14:57
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.
– Mic Sel
Dec 27 '18 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
Dec 27 '18 at 15:15
@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
Dec 27 '18 at 15:15
What is the selector that overides your css?
– Mark Baijens
Dec 27 '18 at 15:17
What is the selector that overides your css?
– Mark Baijens
Dec 27 '18 at 15:17
@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
Dec 27 '18 at 15:26
@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
Dec 27 '18 at 15:26
add a comment |
2 Answers
2
active
oldest
votes
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 '18 at 15:52
FrozenKiwi
595216
answered Dec 27 '18 at 15:35
IvanS95
874218
1
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
– FrozenKiwi
Dec 27 '18 at 15:47
You can also useidas well, and that has higher specificity than any class, although its better practice to just stick with classes for CSS
– IvanS95
Dec 27 '18 at 15:50
Yeah, I considered that but that would limit to a single element per rule, which wouldn't be very efficient
– FrozenKiwi
Dec 27 '18 at 15:52
add a comment |
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 '18 at 15:03
Rahul
3,012159
The style is being applied, it's just applied below the default SemanticUI styling, and so is overridden by the default stylings
– FrozenKiwi
Dec 27 '18 at 15:13
@FrozenKiwi Probably by a more specific selector. What selector overrides it?
– Mark Baijens
Dec 27 '18 at 15:19
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53946895%2fcss-class-applied-before-internal-css-class-and-not-affecting-semanticui-button%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 '18 at 15:52
FrozenKiwi
595216
answered Dec 27 '18 at 15:35
IvanS95
874218
1
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
– FrozenKiwi
Dec 27 '18 at 15:47
You can also useidas well, and that has higher specificity than any class, although its better practice to just stick with classes for CSS
– IvanS95
Dec 27 '18 at 15:50
Yeah, I considered that but that would limit to a single element per rule, which wouldn't be very efficient
– FrozenKiwi
Dec 27 '18 at 15:52
add a comment |
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 '18 at 15:52
FrozenKiwi
595216
answered Dec 27 '18 at 15:35
IvanS95
874218
1
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
– FrozenKiwi
Dec 27 '18 at 15:47
You can also useidas well, and that has higher specificity than any class, although its better practice to just stick with classes for CSS
– IvanS95
Dec 27 '18 at 15:50
Yeah, I considered that but that would limit to a single element per rule, which wouldn't be very efficient
– FrozenKiwi
Dec 27 '18 at 15:52
add a comment |
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 '18 at 15:52
FrozenKiwi
595216
answered Dec 27 '18 at 15:35
IvanS95
874218
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 '18 at 15:52
FrozenKiwi
595216
answered Dec 27 '18 at 15:35
IvanS95
874218
edited Dec 27 '18 at 15:52
FrozenKiwi
595216
edited Dec 27 '18 at 15:52
FrozenKiwi
595216
edited Dec 27 '18 at 15:52
FrozenKiwi
595216
595216
answered Dec 27 '18 at 15:35
IvanS95
874218
answered Dec 27 '18 at 15:35
IvanS95
874218
answered Dec 27 '18 at 15:35
IvanS95
874218
874218
1
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
– FrozenKiwi
Dec 27 '18 at 15:47
You can also useidas well, and that has higher specificity than any class, although its better practice to just stick with classes for CSS
– IvanS95
Dec 27 '18 at 15:50
Yeah, I considered that but that would limit to a single element per rule, which wouldn't be very efficient
– FrozenKiwi
Dec 27 '18 at 15:52
add a comment |
1
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
– FrozenKiwi
Dec 27 '18 at 15:47
You can also useidas well, and that has higher specificity than any class, although its better practice to just stick with classes for CSS
– IvanS95
Dec 27 '18 at 15:50
Yeah, I considered that but that would limit to a single element per rule, which wouldn't be very efficient
– FrozenKiwi
Dec 27 '18 at 15:52
1
1
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
– FrozenKiwi
Dec 27 '18 at 15:47
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
– FrozenKiwi
Dec 27 '18 at 15:47
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– IvanS95
Dec 27 '18 at 15:50
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– IvanS95
Dec 27 '18 at 15:50
Yeah, I considered that but that would limit to a single element per rule, which wouldn't be very efficient
– FrozenKiwi
Dec 27 '18 at 15:52
Yeah, I considered that but that would limit to a single element per rule, which wouldn't be very efficient
– FrozenKiwi
Dec 27 '18 at 15:52
add a comment |
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 '18 at 15:03
Rahul
3,012159
The style is being applied, it's just applied below the default SemanticUI styling, and so is overridden by the default stylings
– FrozenKiwi
Dec 27 '18 at 15:13
@FrozenKiwi Probably by a more specific selector. What selector overrides it?
– Mark Baijens
Dec 27 '18 at 15:19
add a comment |
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 '18 at 15:03
Rahul
3,012159
The style is being applied, it's just applied below the default SemanticUI styling, and so is overridden by the default stylings
– FrozenKiwi
Dec 27 '18 at 15:13
@FrozenKiwi Probably by a more specific selector. What selector overrides it?
– Mark Baijens
Dec 27 '18 at 15:19
add a comment |
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 '18 at 15:03
Rahul
3,012159
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 '18 at 15:03
Rahul
3,012159
answered Dec 27 '18 at 15:03
Rahul
3,012159
answered Dec 27 '18 at 15:03
Rahul
3,012159
answered Dec 27 '18 at 15:03
Rahul
3,012159
3,012159
The style is being applied, it's just applied below the default SemanticUI styling, and so is overridden by the default stylings
– FrozenKiwi
Dec 27 '18 at 15:13
@FrozenKiwi Probably by a more specific selector. What selector overrides it?
– Mark Baijens
Dec 27 '18 at 15:19
add a comment |
The style is being applied, it's just applied below the default SemanticUI styling, and so is overridden by the default stylings
– FrozenKiwi
Dec 27 '18 at 15:13
@FrozenKiwi Probably by a more specific selector. What selector overrides it?
– Mark Baijens
Dec 27 '18 at 15:19
The style is being applied, it's just applied below the default SemanticUI styling, and so is overridden by the default stylings
– FrozenKiwi
Dec 27 '18 at 15:13
The style is being applied, it's just applied below the default SemanticUI styling, and so is overridden by the default stylings
– FrozenKiwi
Dec 27 '18 at 15:13
@FrozenKiwi Probably by a more specific selector. What selector overrides it?
– Mark Baijens
Dec 27 '18 at 15:19
@FrozenKiwi Probably by a more specific selector. What selector overrides it?
– Mark Baijens
Dec 27 '18 at 15:19
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53946895%2fcss-class-applied-before-internal-css-class-and-not-affecting-semanticui-button%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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.
– Mic Sel
Dec 27 '18 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
Dec 27 '18 at 15:15
What is the selector that overides your css?
– Mark Baijens
Dec 27 '18 at 15:17
@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
Dec 27 '18 at 15:26