This question already has an answer here:
Why did browsers limit :visited selector?
(1 answer)
Closed 3 years ago.
I'm able to select child of a like so:
a > img {
/*change something*/
}
But I want first select a:visited, than its child. Something like:
a:visited > img {
/*change something*/
}
But the latter seems not working.
Example of HTML. Want change appearance of the image (adding border border: 2px solid; for example), if it is visited.
<!DOCTYPE html>
<body id="body-html">
<a href="https://stackoverflow.com/questions/56418220/css-selectors-avisited-childs?noredirect=1#comment99432271_56418220" class="test">
<img src="https://i.stack.imgur.com/nzzXb.png">
</a>
</body>
How can I achieve this?
Most CSS rules on :visited links have been blocked for security reasons.
However, you can still apply border-color to them.
The only gotcha here is that the border must be also applied on non-visited links, since you can only change the border-color.
a img {
border: 2px solid white;
}
a:visited img {
border-color: green;
}
fiddle
Though direct styling for :visited links is limited, there are lots of clever ways to extend your options for styling visited links. In 2015 there was a bumper crop of blog posts sharing new ideas for styling :visited links:
https://css-tricks.com/almanac/selectors/v/visited/
Related
This question already has answers here:
Why doesn't this a:visited css style work?
(6 answers)
Why are certain CSS properties not applied to a:visited? [duplicate]
(1 answer)
Why did browsers limit :visited selector?
(1 answer)
Closed 12 months ago.
I want it such that an a element that is visited and of the class, myclass is lightgreen and not clickable. I am able to make it lightgreen, but it is still clickable.
My code:
a:visited.upvote {
pointer-events: none;
cursor: default;
color: lightgreen;
}
and when that code is applied to all a elements, regardless of class and visited status (a {...}), the link is disabled as it should be.
The pointer-events property can't be applied to the :visited CSS pseudo-class due to:
Privacy restrictions
Because of privacy reasons, browsers strictly limit which
styles you can apply using this pseudo-class, and how they can be
used:
Allowable CSS properties are color, background-color, border-color, border-bottom-color, border-left-color,
border-right-color, border-top-color, column-rule-color,
outline-color, text-decoration-color, and
text-emphasis-color.
More info here.
A workaround would be adding a click event listener to the tags and then add to it a class that would apply the pointer-events: none; like so:
const unclickable = document.getElementById("unclickable")
unclickable.addEventListener("click", makeitso)
function makeitso() {
unclickable.className = "notSoClickableLink"
}
div{
display: flex;
flex-direction: column;
gap: 1rem;
}
.notSoClickableLink{
pointer-events: none;
color: lightgrey;
}
<div>
The first Link
<a id="unclickable" href="#2">Make this a visited Link</a>
</div>
This solution would not track your link tag's state, to circumvent that you can try referring to this post: How can I detect visited and unvisited links on a page?
From my understanding :visited styles links that have been visited and :link styles links. I noticed that you cant set the background-color with :visited unless you also set a background-color with :link, why is this?? This leads me to think they are different, if so how are different, other then one styles the links and the other visited links?
for example:
https://jsfiddle.net/kk1ouqvc/11/
<a href="https://en.wikipedia.org/wiki/Main_Page">
wikipedia
</a>
/***
a:visited{
background-color: red;//doesnt work
}
**/
/***
a:visited{
background-color: red;// works
}
a:link{
background-color: blue;
}
***/
Here is a answer from https://tympanus.net/codrops/css_reference/visited/ that helped me to understand some times ago. You have to set a background-color on element before it has beeing visited
There’s also an “anomaly” related to the background-color applied to a link using :visited: the background color in the :visited state won’t be applied to the link unless an actual “real” background color is applied to the link prior to its visited state—that is, in its :link state.
This question already has answers here:
CSS negation pseudo-class :not() for parent/ancestor elements
(2 answers)
Closed 7 years ago.
i have a hover effect for the links on my website. i want these to apply to every link EXCEPT ones in a particular div.
Example HTML
<div id="menu">
<div class="menu_item">
<a href="index.html" title="Home" target="_self">
<img src="_images/_menu/Home.png"
onmouseover="this.src='_images/_menu/homeHover.png'"
onmouseout="this.src='_images/_menu/Home.png'"
onclick="this.src='_images/_menu/homePressed.png'" alt=""/></a>
</div>
</div>
The CSS i have been trying to us
a:hover:not(.menu_item) {
background-color: #D6910E;
color: #FFE1A7;
} *no change*
a:hover:not(#menu) { *no change*
a:hover:not(#menu.menu_item) { *turns off hover on all links*
a:hover:not(#menu .menu_item) { *turns off hover on all links*
want these to apply to every link EXCEPT ones in a particular div
The standard approach to such problems in CSS is to give the general rule first, then the specific rule to override it. Using :not is a slippery slope and should be reserved for special cases. So:
/* State the general rule first */
a:hover {
background-color: #D6910E;
color: #FFE1A7;
}
/* Give the exception */
.menu_item a:hover {
background-color: transparent;
color: inherit;
}
If you do want to use :not, you have to understand that the predicate applies to the current element:
a:hover:not(#menu)
does not mean a tags being hovered which are not children of #menu; it means a tags being hovered which are not themselves #menu (which will always match). To do what you are trying to do with :not, you would want to try something like
:not(#menu) a:hover
However, this will also not work, because it means "a tags being hovered which have any ancestor which is not #menu", which will also almost always match.
Why you don't make it easier ?
Like
a:hover {
background-color:red;
color:red;
}
#menu .menu_item:hover{
/* Default color */
}
In your case , you can repair it by change the position of "hover"
a:not(.menu_item):hover {
background-color: #D6910E;
color: #FFE1A7;
} /*no change*/
a:not(#menu):hover { /*no change*/ }
a:not(#menu.menu_item) :hover { /*turns off hover on all links*/
a:not(#menu .menu_item):hover { /*turns off hover on all links*/
Hope it 'll help you
Here are two examples based on this HTML.
<a href="#">
<div class="foo">
hello
<span class="bar">world</span>
</div>
</a>
In the first one, I make the link not underline on hover, then make a sub-portion of the link underline, and that works fine:
a {
text-decoration:none;
}
a:hover {
text-decoration: none;
}
a:hover .bar {
text-decoration: underline;
}
http://jsfiddle.net/3qPyX/1/
In the second, I now reverse the selectors so that the second word should be un-underlined. However, now something strange happens. The entire link remains underlined even though the selectors seem like they should remove underline from the second word. <-- (this is the question. why does this happen?)
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
text-decoration: none;
}
http://jsfiddle.net/EAmwt/
Can someone explain what's going wrong in the second example? Inspecting with Chrome shows the span.bar has a computed style of text-decoration:none.
Update: a few answers explaining how to get around the problem, which is great except that's not really my question. What I want to know is why is this behavior different than, say, bold? For instance, if I try the 2nd example with bold, I get the expected results: http://jsfiddle.net/3qPyX/4/
Explanation:
The problem is that some properties (like text-decoration) get drawn to the whole parent inline element, whereas others - like font styling (that get inherited) - get overriden by the children properties.
Just for illustration: simmilarly, if you set a background color to a parent element it will paint the background of the parent ... and you would have to set another color to a child to lay it over (default - transparent - will still show the parent style through), but if you set font-weight at a child it will apply to the text inside the child element and override the parent settings.
You can find more detailed stuff on the text-decoration property in the CSS Level 2 and Level 3 Specifications.
A simple solution
withot changing the markup, you could just display .bar as inline-block.
Like so:
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
display:inline-block;
}
And the inline-block breaks out of the inline/text styling of the parent anchor element =) And you can then style it independently:
DEMO
When you do the text-decoration it is applied to the entire line at once. So the a:hover .bar doesn't cause any effect, because the underline is not being applied in the .bar but on the a.
Here is the specification: http://www.w3.org/TR/CSS21/text.html#lining-striking-props
UPDATE! (As #Cam suggested) :
You need the add in separate elements the parts of your text: http://jsfiddle.net/3qPyX/5/
The CSS:
.foo, a:hover .bar, a {
text-decoration:none;
}
a:hover .foo {
text-decoration: underline;
}
Ref: Forms, Post and submit buttons
Following on from my last question, I've attempted to style my input tags.
I tried
.as_link {
background: transparent;
border: none;
cursor: pointer;
padding: 0px;
}
.as_link:link {
background: transparent;
border: none;
cursor: pointer;
padding: 0px;
}
.as_link:visited {
background: transparent;
border: none;
cursor: pointer;
padding: 0px;
}
.as_link:hover {
text-decoration: underline;
background: #F4F0F0;
}
but read somewhere that you're not meant to select elements in this fashion for pseudo-classes so I tried:
input.as_link {
background: transparent;
border: none;
cursor: pointer;
padding: 0px;
}
input.as_link:link {
background: transparent;
border: none;
cursor: pointer;
padding: 0px;
}
input.as_link:visited {
background: transparent;
border: none;
cursor: pointer;
padding: 0px;
}
input.as_link:hover {
text-decoration: underline;
background: #F4F0F0;
}
Still no dice on the hover. The standard does take effect but the hover does nothing. My question is this:
What are the rules on assigning pseudo-classes in general? Not just in my case above but are they only for anchors or can you use them for any elements?
Thanks in advance.
Edit: this is not local to IE. This problem happens in Opera 9 and FF3 as well.
Edit2: I feel it has something to do with the fact hover needs link and visited prior to it. It seems as though the browsers ignore link and visted if they don't have an anchor tag around them? This is purely speculating but I wonder if it holds any merit?
Not just in my case above but are they
only for anchors or can you use them
for any elements?
Well, no. CSS pseudo-classes are used to add special effects to some selectors.
The syntax of pseudo-classes:
selector:pseudo-class {property:value}
CSS classes can also be used with pseudo-classes:
selector.class:pseudo-class {property:value}
Anchor Pseudo-classes
Links can be displayed in different ways in a CSS-supporting browser:
a:link {color:#FF0000} /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */
Pseudo-classes can be combined with CSS classes:
a.red:visited {color:#FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
If the link in the example above has been visited, it will be displayed in red.
The :first-child Pseudo-class
The :first-child pseudo-class matches a specified element that is the first child of another element.
In the following example, the selector matches any element that is the first child of any element:
<html>
<head>
<style type="text/css">
p:first-child
{
color:blue
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
Pseudo-classes
The number indicates in which CSS version the property is defined (CSS1 or CSS2).
:active Adds a style to an element that is activated 1
:first-child Adds a style to an element that is the first child of
another element 2
:focus Adds a style to an element that has keyboard input focus 2
:hover Adds a style to an element when you mouse over it 1
:lang Adds a style to an element with a specific lang attribute 2
:link Adds a style to an unvisited link 1
:visited Adds a style to a visited link 1
More information here.
If you're looking for rules for assigning pseudo-classes in general, this link will help you:
http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
You can use pseudo-selectors for any element you like, whether the browser/user-agent interprets or applies them is, sadly, entirely up to them.
A detailed review of css pseudo-selectors (I couldn't find one specifically limited to pseudo-selectors) is over at: Quirksmode.
In short IE6 is a problem for :hover and :active on anything but links; IE 7 plays slightly better, but only supports :active on non-links.
IE8 seems to be pretty well up-to-spec, insofar as css2.1 pseudo-selectors go.
I think I just found the answer....
My code was flawed.
input.as_link:hover {
text-decoration: underline;
background: yellow;
}
input.as_link:focus {
text-decoration: underline;
background: yellow;
}
input.as_link:focus:hover {
text-decoration: underline;
background: yellow;
}
Underscore doesn't work because it's not "text" and the text isn't highlighted. Shame but oh well, the background colour I chose didn't show up... I guess I typed in one incorrectly (or the same as the background). The bright yellow worked.
Thanks to everyone who replied though!