Reputation:
This is my code:
a:hover
a:focus,
a:active
a.active {
color: #fec503;
}
And I don't know what is different between "a:active" and "a.active". So can someone explain to me?
Upvotes: 0
Views: 40
Reputation: 858
First they are all classes selectors,
":" is a Pseudo-class selector: It references a state, eg. :active, :hover, :first-child, :empty etc.
"." is a class selector: Use the class attribute in an element to assign the element to a named class
Upvotes: 1
Reputation: 131
a:active would basically describe a anchor link that's active. With that style, your CSS would target all active links.
a.active is more specific. It targets an anchor tag that has a class of active.
For example: <a href="www.example.com" class="active">
For more information on CSS selectors, I recommend: http://www.w3schools.com/cssref/css_selectors.asp
Upvotes: 1
Reputation: 650
.
is referencing a class. For example, to change the color of a link with class "active" you would use the following
a.active {
color: red;
}
:
is referencing a state. For example, to alter the color of a link being hovered over you would:
a: hover {
color: green;
}
Upvotes: 0