user4317539
user4317539

Reputation:

I don't know what is different between " : " and " . " in css

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

Answers (3)

A Web-Developer
A Web-Developer

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

Jeremy
Jeremy

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

Feek
Feek

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

Related Questions