Don't apply :before, if certain class is set to the tag (combine :before and :not)2019 Community Moderator ElectionCSS center display inline block?What is the best way to conditionally apply a class?Why are certain CSS properties not applied to a:visited?javafx 2 and css pseudo-classes: setting hover attributes in setStyle methodCSS pseudo class for leaving hoverselctor:hover.class applied before hoverHover one DIV affecting another DIV: Why takes two taps on portable devices?css underline transitions hover state bouncing my list items<a> on hover initiates undesired hover effect. What is going on here, and is there a way to stop it?Text On Hover Animation Not Working Properly With Space
Does the nature of the Apocalypse in The Umbrella Academy change from the first to the last episode?
Signed and unsigned numbers
How are instrumentation amplifiers constructed on the semiconductor level?
'The literal of type int is out of range' con número enteros pequeños (2 dígitos)
How to secure an aircraft at a transient parking space?
Find longest word in a string: are any of these algorithms good?
Why does liquid water form when we exhale on a mirror?
An alternative proof of an application of Hahn-Banach
Virginia employer terminated employee and wants signing bonus returned
Conservation of Mass and Energy
Are there historical instances of the capital of a colonising country being temporarily or permanently shifted to one of its colonies?
Does this video of collapsing warehouse shelves show a real incident?
Are babies of evil humanoid species inherently evil?
Does "Until when" sound natural for native speakers?
How does one describe somebody who is bi-racial?
Can I pump my MTB tire to max (55 psi / 380 kPa) without the tube inside bursting?
Accountant/ lawyer will not return my call
How is the wildcard * interpreted as a command?
How can I ensure my trip to the UK will not have to be cancelled because of Brexit?
How strictly should I take "Candidates must be local"?
What is the magic ball of every day?
Declaring and defining template, and specialising them
Examples of a statistic that is not independent of sample's distribution?
At what distance can a bugbear, holding a reach weapon, with the Polearm Master feat, get their Opportunity Attack?
Don't apply :before, if certain class is set to the tag (combine :before and :not)
2019 Community Moderator ElectionCSS center display inline block?What is the best way to conditionally apply a class?Why are certain CSS properties not applied to a:visited?javafx 2 and css pseudo-classes: setting hover attributes in setStyle methodCSS pseudo class for leaving hoverselctor:hover.class applied before hoverHover one DIV affecting another DIV: Why takes two taps on portable devices?css underline transitions hover state bouncing my list items<a> on hover initiates undesired hover effect. What is going on here, and is there a way to stop it?Text On Hover Animation Not Working Properly With Space
I am styling the underline of a link (<a href...>) via the pseudo class :before, to get a nice transition effect when hovering.
Now I want to exclude some links, if the have a certain class (for example: <a href="#" class="btn">Button</a>).
a:not(.btn) is working, but if I try to use a::before:not(.btn), the effect doesn't work anymore.
See this JSFiddle:
Working without :not, but the button should not have the effect: https://jsfiddle.net/bzo0nqey/1/
Broken with :not: https://jsfiddle.net/bzo0nqey/
I don't want to use <button> or some other element instead of <a>, because this would cost me hours of editing. Moreover, <a><img></a> is also having this effect falsely: https://jsfiddle.net/7v9u260j/
css hover
asked Mar 6 at 15:25
medermeder
183
add a comment |
I am styling the underline of a link (<a href...>) via the pseudo class :before, to get a nice transition effect when hovering.
Now I want to exclude some links, if the have a certain class (for example: <a href="#" class="btn">Button</a>).
a:not(.btn) is working, but if I try to use a::before:not(.btn), the effect doesn't work anymore.
See this JSFiddle:
Working without :not, but the button should not have the effect: https://jsfiddle.net/bzo0nqey/1/
Broken with :not: https://jsfiddle.net/bzo0nqey/
I don't want to use <button> or some other element instead of <a>, because this would cost me hours of editing. Moreover, <a><img></a> is also having this effect falsely: https://jsfiddle.net/7v9u260j/
css hover
asked Mar 6 at 15:25
medermeder
183
add a comment |
I am styling the underline of a link (<a href...>) via the pseudo class :before, to get a nice transition effect when hovering.
Now I want to exclude some links, if the have a certain class (for example: <a href="#" class="btn">Button</a>).
a:not(.btn) is working, but if I try to use a::before:not(.btn), the effect doesn't work anymore.
See this JSFiddle:
Working without :not, but the button should not have the effect: https://jsfiddle.net/bzo0nqey/1/
Broken with :not: https://jsfiddle.net/bzo0nqey/
I don't want to use <button> or some other element instead of <a>, because this would cost me hours of editing. Moreover, <a><img></a> is also having this effect falsely: https://jsfiddle.net/7v9u260j/
css hover
asked Mar 6 at 15:25
medermeder
183
I am styling the underline of a link (<a href...>) via the pseudo class :before, to get a nice transition effect when hovering.
Now I want to exclude some links, if the have a certain class (for example: <a href="#" class="btn">Button</a>).
a:not(.btn) is working, but if I try to use a::before:not(.btn), the effect doesn't work anymore.
See this JSFiddle:
Working without :not, but the button should not have the effect: https://jsfiddle.net/bzo0nqey/1/
Broken with :not: https://jsfiddle.net/bzo0nqey/
I don't want to use <button> or some other element instead of <a>, because this would cost me hours of editing. Moreover, <a><img></a> is also having this effect falsely: https://jsfiddle.net/7v9u260j/
css hover
css hover
asked Mar 6 at 15:25
medermeder
183
asked Mar 6 at 15:25
medermeder
183
edited Mar 6 at 15:30
meder
asked Mar 6 at 15:25
medermeder
183
asked Mar 6 at 15:25
medermeder
183
asked Mar 6 at 15:25
medermeder
183
183
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You have to put :not before ::before then its working like intended
a:not(.btn)::before
answered Mar 6 at 15:30
Artur LeinweberArtur Leinweber
1914
New contributor
Artur Leinweber is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
This is working! Do you also have an idea for something like this: <a><img></a> ? jsfiddle.net/7v9u260j/1
– meder
Mar 6 at 15:37
mh, that kind of selector: a:not(a > img) is not working in css. if you want to achieve something like this, you have to put an extra class on the a tag. or: make some styling to a>img and for normal img you reset that styling, then no extra class needed
– Artur Leinweber
Mar 6 at 22:44
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%2f55026593%2fdont-apply-before-if-certain-class-is-set-to-the-tag-combine-before-and-no%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You have to put :not before ::before then its working like intended
a:not(.btn)::before
answered Mar 6 at 15:30
Artur LeinweberArtur Leinweber
1914
New contributor
Artur Leinweber is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
This is working! Do you also have an idea for something like this: <a><img></a> ? jsfiddle.net/7v9u260j/1
– meder
Mar 6 at 15:37
mh, that kind of selector: a:not(a > img) is not working in css. if you want to achieve something like this, you have to put an extra class on the a tag. or: make some styling to a>img and for normal img you reset that styling, then no extra class needed
– Artur Leinweber
Mar 6 at 22:44
add a comment |
You have to put :not before ::before then its working like intended
a:not(.btn)::before
answered Mar 6 at 15:30
Artur LeinweberArtur Leinweber
1914
New contributor
Artur Leinweber is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
This is working! Do you also have an idea for something like this: <a><img></a> ? jsfiddle.net/7v9u260j/1
– meder
Mar 6 at 15:37
mh, that kind of selector: a:not(a > img) is not working in css. if you want to achieve something like this, you have to put an extra class on the a tag. or: make some styling to a>img and for normal img you reset that styling, then no extra class needed
– Artur Leinweber
Mar 6 at 22:44
add a comment |
You have to put :not before ::before then its working like intended
a:not(.btn)::before
answered Mar 6 at 15:30
Artur LeinweberArtur Leinweber
1914
New contributor
Artur Leinweber is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
You have to put :not before ::before then its working like intended
a:not(.btn)::before
answered Mar 6 at 15:30
Artur LeinweberArtur Leinweber
1914
New contributor
Artur Leinweber is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Mar 6 at 15:30
Artur LeinweberArtur Leinweber
1914
New contributor
Artur Leinweber is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Mar 6 at 15:30
Artur LeinweberArtur Leinweber
1914
answered Mar 6 at 15:30
Artur LeinweberArtur Leinweber
1914
1914
New contributor
Artur Leinweber is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Artur Leinweber is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Artur Leinweber is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
This is working! Do you also have an idea for something like this: <a><img></a> ? jsfiddle.net/7v9u260j/1
– meder
Mar 6 at 15:37
mh, that kind of selector: a:not(a > img) is not working in css. if you want to achieve something like this, you have to put an extra class on the a tag. or: make some styling to a>img and for normal img you reset that styling, then no extra class needed
– Artur Leinweber
Mar 6 at 22:44
add a comment |
This is working! Do you also have an idea for something like this: <a><img></a> ? jsfiddle.net/7v9u260j/1
– meder
Mar 6 at 15:37
mh, that kind of selector: a:not(a > img) is not working in css. if you want to achieve something like this, you have to put an extra class on the a tag. or: make some styling to a>img and for normal img you reset that styling, then no extra class needed
– Artur Leinweber
Mar 6 at 22:44
This is working! Do you also have an idea for something like this: <a><img></a> ? jsfiddle.net/7v9u260j/1
– meder
Mar 6 at 15:37
This is working! Do you also have an idea for something like this: <a><img></a> ? jsfiddle.net/7v9u260j/1
– meder
Mar 6 at 15:37
mh, that kind of selector: a:not(a > img) is not working in css. if you want to achieve something like this, you have to put an extra class on the a tag. or: make some styling to a>img and for normal img you reset that styling, then no extra class needed
– Artur Leinweber
Mar 6 at 22:44
mh, that kind of selector: a:not(a > img) is not working in css. if you want to achieve something like this, you have to put an extra class on the a tag. or: make some styling to a>img and for normal img you reset that styling, then no extra class needed
– Artur Leinweber
Mar 6 at 22:44
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.
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%2f55026593%2fdont-apply-before-if-certain-class-is-set-to-the-tag-combine-before-and-no%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
