Using dots or colons in CSS effects

Question

I'm working with css, so I don't know when to use dots and when to use colons for CSS efects, such as hover, active, visited. For example:

For list item named "tab", this code works:

.tab a.active
{ 
    text-decoration: none;
    background: #fff; 
}

When I use colon, effect doesn't apply:

.tab a:active 
{ 
    text-decoration: none;
    background: #fff; 
}

In the previous work, I use hover effect on ID element:

a:hover
{ 
    background-color:yellow;
}

This code worked. Is there a difference in these two effects, because in the first example, it is applied on class, and in the last example it is applied on ID?

Answer 1

.class this is a class

#id this is an id

:after this is a pseudoelement

For example: #wrapper .button:hover means that you have your mouse over an element like this

<div id="wrapper">
   <div class="button">I'm a button</div> <!-- Mouse over this one -->
</div>

Let me know if it's useful.

Answer 2

dot is used to give styles to a class and colon is used for any effect to pseudoelement (that is an element in a id or class).