Overriding a pseudo element on a visited link [closed] - css

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have this:
a::before {
content: "NEW! ";
color: red;
}
a:visited::before {
content: none;
}
News
I expect visited links to override and remove the "NEW!" pseudo element text, but it won't. From the inspector, it seems as though the property is getting overridden, but the text is still visible.
Edit: this question has been answered. There are strict limitations to styling links with the :visited class

Related

Alternative textarea background colors [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 days ago.
Improve this question
Has anyone got any ideas how to make textarea posts, which are created from a javascript function, be given different color backgrounds within the CSS? I have tried the nth-of-type (odd) and nth-child (even) etc..., but from what I can see, this only works with tables.
Any help would be greatly appreciated.
.post textarea:nth-of-type(odd) {
background-color: green
}
.posttextarea:nth-of-type(even) {
background-color: red
}

CSS everything selector problem with multiple :not() [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
there is a problem that I have had since I started using CSS everything selector [*] with multiple [:not()].
Examples below does not work as I tried:
.post-body *:not(.has-color):not(.has-bg){
color: red
}
.post-body *:not(.has-color)*:not(.has-bg){
color: red
}
.post-body *:not(.has-color .has-bg){
color: red
}
.post-body *:not(.has-color , .has-bg){
color: red
}
Imagine something like WordPress post content; I can not change the content whole structure but I do need to set a primary color for texts which do not have a specific background or text color. So I am trying to set Red Color to any element except elements that contain ".has-color" or ".has-bg" that is it there is no relation between them.
Has somebody solved this issue or even seemed to something like this?
Your first example should work, as shown in this CodePen, but as Louys notes, it’s hard to tell without any markup.
.post-body *:not(.has-color):not(.has-bg) {
color: red;
}

What is overriding the CSS rule? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Here is another unexpected outcome of a CSS rule. (Yesterday I posted this that was not understood here: How to I avoid that the CSS rule * {} trump .a .b {}?)
For historical reasons I have these CSS rules:
:root {
--baseFontSize: 16px;
}
html {
font-size: var(--baseFontSize);
}
The last rule shows up in Chrome on a P element. The computed value of --baseFontSize on that element is " 16px". The "Computed Style" shows that the last rule used is the rule above.
But. The value is "20.8px".
What is going on?
If we create a html document with your variables it can be seen that the value is indeed 16px as expected. So there are no 20.8px anywhere.
Maybe you zoomed in on browser? Set a different font-size on your OS?
:root {
--baseFontSize: 16px;
}
html {
font-size: var(--baseFontSize);
}
<p> Here be text </p>

How to set normal colors and hovering colors? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Link: jsfiddle.net/d8p00ca5/2/
I want to give icons a certain color(lets say red) and text another color(black).
But when I hover the link, icon and text should have the same color(yellow).
How can I do that?
a:hover > .fa {
color:yellow;
}
Note, this selector is very general and may not be appropriate in all situations.
Alternatively,
a.circle:hover > .fa {
color:yellow;
}
Is a little more specific.
Jsfiddlde Demo
You just need to add .circle:hover .fa {color:yellow;}
http://jsfiddle.net/d8p00ca5/4/

h5 style does not show color effect [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Below is small code snap. Though I have given color there it does not show. Underline and position is ok.
h5 {
margin-left: 36%;
color:#C0C0C0;
text-decoration:underline;
}
If you use the web inspector tools in Chrome you will most likely see a more specific style that overrides your style.
For example:
body > h2 {
color: green;
}
h2 {
color: red;
}
A JSBin to demonstrate
Is how Chrome Tools would show it.

Resources