How can I write :hover and :visited condition for a:before?
I'm trying a:before:hover, but it's not working.
This depends on what you're actually trying to do.
If you simply wish to apply styles to a :before pseudo-element when the a element matches a pseudo-class, you need to write a:hover:before or a:visited:before instead. Notice the pseudo-element comes after the pseudo-class (and in fact, at the very end of the entire selector). Notice also that they are two different things; calling them both "pseudo-selectors" is going to confuse you once you run into syntax problems such as this one.
If you're writing CSS3, you can denote a pseudo-element with double colons to make this distinction clearer. Hence, a:hover::before and a:visited::before. But if you're developing for legacy browsers such as IE8 and older, then you can get away with using single colons just fine.
This specific order of pseudo-classes and pseudo-elements is stated in the spec:
One pseudo-element may be appended to the last sequence of simple selectors in a selector.
A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
A pseudo-class is a simple selector. A pseudo-element, however, is not, even though it resembles a simple selector.
However, for user-action pseudo-classes such as :hover1, if you need this effect to apply only when the user interacts with the pseudo-element itself but not the a element, then this is not possible other than through some obscure layout-dependent workaround. As implied by the text, standard CSS pseudo-elements cannot currently have pseudo-classes. In that case, you will need to apply :hover to an actual child element instead of a pseudo-element.
1 Of course, this does not apply to link pseudo-classes such as :visited as in the question, since pseudo-elements aren't links.
Write a:hover::before instead of a::before:hover: example.
To change a menu link's text on mouseover (different language text on hover), here is the
jsfiddle example
HTML:
<a align="center" href="#"><span>kannada</span></a>
CSS:
span {
font-size: 12px;
}
a {
color: green;
}
a:hover span {
display: none;
}
a:hover:before {
color: red;
font-size: 24px;
content: "ಕನ್ನಡ";
}
Try to use .card-listing:hover::after, hover, and after using ::. It will work.
Or you can set pointer-events:none to your a element and pointer-event:all to your a:before element, and then add hover CSS to a element:
a{
pointer-events: none;
}
a:before{
pointer-events: all
}
a:hover:before{
background: blue;
}
BoltClock's answer is correct. The only thing I want to append is that if you want to only select the pseudo element, put in a span.
For example:
<li><span data-icon='u'></span> List Element </li>
instead of:
<li> data-icon='u' List Element</li>
This way you can simply say
ul [data-icon]:hover::before {color: #f7f7f7;}
which will only highlight the pseudo element, not the entire li element.
You can also restrict your action to just one class using the right pointed bracket (">"), as I have done in this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span {
font-size: 12px;
}
a {
color: green;
}
.test1>a:hover span {
display: none;
}
.test1>a:hover:before {
color: red;
content: "Apple";
}
</style>
</head>
<body>
<div class="test1">
<span>Google</span>
</div>
<div class="test2">
<span>Apple</span>
</div>
</body>
</html>
Note: The hover:before switch works only on the .test1 class
Related
I'm trying to get my head around the not selector is css. I'm trying to hide a div called "InfoRow" if the page doesn't have a class of 'home'
My first stab at this:
:not(body.home #InfoRow) {
display:none;
}
From MDN:
The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.
:not(.foo) will match anything that isn't .foo, including <html> and <body>
As the class .home would be set on the <body> tag, and #InfoRow is a child of <body>, you'd have to write it like this:
body:not(.home) #InfoRow {
display: none;
}
I am learning CSS and I am having a bit of trouble recognizing properties and understanding some of the syntax. in the CSS below.
.tabs nav li.tab-current:before,
.tabs nav li.tab-current:after {
}
I understand that tabs is a class and the nav li with the class tab-current within the tabs class in html will be applied with the same CSS.
Example:
<div class="tabs">
<nav>
<ul>
<li class="tab-current">Hey</li>
<li>hello</li>
</ul>
</nav>
</div>
However I'm not quite sure what :before and :after represent. Could someone provide me with an example? Thank you
They set something after and before the element you are selecting. For example:
p:after {
content: 'hi! im after';
}
p:before {
content: 'hi! im before';
}
You will understand it better if you see this fiddle.
:before and :after create pseudo elements as 'children' for the element they are applied to. They are often used for certain stylings, or error messages.
Fiddle: http://jsfiddle.net/XjUM8/1/
div:before {
content: "Before";
background: red;
}
div:after {
content: "After";
background: blue;
color: white;
}
You can also set them up to show up on hover
Fiddle : http://jsfiddle.net/XjUM8/2/
div:hover:before {
content: "Before";
background: red;
}
div:hover:after {
content: "After";
background: blue;
color: white;
}
Also, take a look at MDN :
Before & After
:before and :after are CSS Selectors that allow you to add content before or after the element in question. An example is of adding an arrow after a link to show progress:
HTML
<div class="testAfter"><a>Arrow After this link</a></div>
<div class="testBefore"><a>Arrow Before this link</a></div>
CSS
.testAfter:after{
content:"\25B6"
}
.testBefore:before{
content:"\25C0"
}
Fiddle to show:
http://jsfiddle.net/yPkVL/1/
You can add all kinds of things; images, text, etc. You can style them and add different positionings. You can do all kinds of things. It's like adding an extra div before or after the div in question without having to change the HTML markup.
Reference:
Before
After
:after and :before are called pseudo-elements. They're used to inject some content to your DOM through the CSS.
For instance, say you want to add an icon after every link that targets external websites (we'll assume that these links href all begin with "http://"). This would be a real pain in the neck to try and append this manually. Using the CSS pseudo-element :after, you can simply do something like this :
a[href^="http://"]:after {
content:url('href.png');
}
and bam ! You're good to go.
:after and :before allow you to simply inject some text or image, but they can also be used in many creative ways.
Beware though, they can be applied to anything except "replaced elements" : this means that you won't be able to use those pseudo-elements on tags such as <input>, <textarea>, <object>, <img>, etc.
The W3School explains it pretty well, did you read that up and not understand something?
Essentially what it means is you're going to insert whatever is in the :before area before what content is already in there, and the :after after the content.
:before and :after are selectors, they're used to select what you want to style.
The example on w3schools is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
p::before
{
content:"Read this -";
}
</style>
</head>
<body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>
<p><b>Note:</b> For ::before to work in IE8, a DOCTYPE must be declared.</p>
</body>
</html>
What this does is print out:
Read this - My name is Donald and Read this - I live in Duksburg
After will esentially do the same thing.
There are
Here is my code
<span></span>
<div class='box'>title</div>
<style>div.box:nth-child(1) { color: red; }</style>
It works when I delete the span tag or any other tag which is over the box, but not when I leave it as is. Why is it so?
Use :nth-of-type .
Basically :nth-child counts ALL the siblings. Regardless of type of element. However :nth-of-type takes into account the element selected.
Because the div is now the second child. Use :nth-of-type(n) instead.
<style>
div.box:nth-of-type(1) { color: red; }
</style>
That will select the first div
I'm looking to style a li element, and would like to modify this CSS property:
li:before {
color: blue;
}
However, I am restricted to only using html, inline, styling. I don't have access to the section of the document I'm working on.
Is what I am trying to do, doable, and, if so, how?
You can insert a new stylesheet inline with the following HTML:
<style>
li:before { color: red; }
</style>
The reason this is the only way to do it is that :before is a pseudo-element, meaning that it doesn't actually become part of the DOM. Unfortunately, this means there is no way to style it inline, as requested.
As an example:
<li style="color: red;">text</li>
would style the entire LI element, not just it's :before pseudo-element, and because the :before element has no markup, it can not have it's own style= property.
In CSS, inline styles take precedence over linked CSS files, so you could do something like this with your li elements:-
<li style="color: red;">This is a list item</li>
And it would take precedence over either a linked stylesheet, or an internal stylesheet.
If you're wanting to use more complex selectors, you're out of luck unfortunately.
See: CSS Pseudo-classes with inline styles
You can add:
<style scoped>
li:before {
color: red;
}
</style>
Anywhere as a direct child of the <body> element and it will apply to the whole page, while also being valid HTML5.
How can I write :hover and :visited condition for a:before?
I'm trying a:before:hover, but it's not working.
This depends on what you're actually trying to do.
If you simply wish to apply styles to a :before pseudo-element when the a element matches a pseudo-class, you need to write a:hover:before or a:visited:before instead. Notice the pseudo-element comes after the pseudo-class (and in fact, at the very end of the entire selector). Notice also that they are two different things; calling them both "pseudo-selectors" is going to confuse you once you run into syntax problems such as this one.
If you're writing CSS3, you can denote a pseudo-element with double colons to make this distinction clearer. Hence, a:hover::before and a:visited::before. But if you're developing for legacy browsers such as IE8 and older, then you can get away with using single colons just fine.
This specific order of pseudo-classes and pseudo-elements is stated in the spec:
One pseudo-element may be appended to the last sequence of simple selectors in a selector.
A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
A pseudo-class is a simple selector. A pseudo-element, however, is not, even though it resembles a simple selector.
However, for user-action pseudo-classes such as :hover1, if you need this effect to apply only when the user interacts with the pseudo-element itself but not the a element, then this is not possible other than through some obscure layout-dependent workaround. As implied by the text, standard CSS pseudo-elements cannot currently have pseudo-classes. In that case, you will need to apply :hover to an actual child element instead of a pseudo-element.
1 Of course, this does not apply to link pseudo-classes such as :visited as in the question, since pseudo-elements aren't links.
Write a:hover::before instead of a::before:hover: example.
To change a menu link's text on mouseover (different language text on hover), here is the
jsfiddle example
HTML:
<a align="center" href="#"><span>kannada</span></a>
CSS:
span {
font-size: 12px;
}
a {
color: green;
}
a:hover span {
display: none;
}
a:hover:before {
color: red;
font-size: 24px;
content: "ಕನ್ನಡ";
}
Try to use .card-listing:hover::after, hover, and after using ::. It will work.
Or you can set pointer-events:none to your a element and pointer-event:all to your a:before element, and then add hover CSS to a element:
a{
pointer-events: none;
}
a:before{
pointer-events: all
}
a:hover:before{
background: blue;
}
BoltClock's answer is correct. The only thing I want to append is that if you want to only select the pseudo element, put in a span.
For example:
<li><span data-icon='u'></span> List Element </li>
instead of:
<li> data-icon='u' List Element</li>
This way you can simply say
ul [data-icon]:hover::before {color: #f7f7f7;}
which will only highlight the pseudo element, not the entire li element.
You can also restrict your action to just one class using the right pointed bracket (">"), as I have done in this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span {
font-size: 12px;
}
a {
color: green;
}
.test1>a:hover span {
display: none;
}
.test1>a:hover:before {
color: red;
content: "Apple";
}
</style>
</head>
<body>
<div class="test1">
<span>Google</span>
</div>
<div class="test2">
<span>Apple</span>
</div>
</body>
</html>
Note: The hover:before switch works only on the .test1 class