CSS Selectors

This is a small post of all the CSS selectors, so when you see a CSS file the next time you understand what the selector in the CSS file means.

General Selectors

Applies to any html tag with the ID="copyright"
#copyright
{
    font-size:small;
    text-align:center;
}



Applies to all <h1><h1> HTML tags.
h1
{
    color:Red;
    font-family:Verdana,Sans-Serif;
}

Applies to all <p></p> HTML tags.
p
{
    font-family:Verdana,Sans-Serif;
    text-align:justify;
}

Instead of above two selectors specifying "font-family" twice, use Group Selector like below.
h1, p
{
    font-family:Verdana,Sans-Serif;
}

Applies to any HTML tag that has class set to "latest". Ex: class="latest".
.latest
{
    font-weight:bold;
}

Psuedo-Class Selectors

Even though there are no such classes as a:link still we can use it, that is why it is called psuedo class selector

a) How Anchor tags look initially instead of the usual blue.

a:link

{

    color:Orange;

} 

b) How Anchor tags look after it was clicked once instead of the usual violet.

a:visited

{

    color:Red;
}

c) How Anchor tags look when they are being clicked (Mouse down on it).

a:active

{

    color:Gray;

}

Attribute Selector

In scenarios where say you have HTML tags like this, many of them in the page then to apply CSS based on input tag will apply it to the button as well, the solution is below.
<input type="button" id="abc"/> ------BUTTON
<input type="text" id="abc"/> ------TEXTBOX

Applies only to the TEXTBOX not the button.
input[type="text"]
{
font-size:large;
}

Descendents Selector
Applies to all the descendants, so in this case any <p></p> elements (at any level) within any HTML tag that has the class=" latest".
.latest p
{
font-size:large;
}

Child Selector
Applies to the direct children and not all the descendants as the above selector does.
.latest > p
{
font-size:large;
}

Adjacent Selector
Applies to the immediate <p></p> element (at the same level in the DOM) in this case to any HTML tag with class="latest".
.latest + p
{
font-size:large;
}

Psuedo-Element Selectors
These elements do not exist but we can select them, that is why they are called Psuedo-Element selectors.
Makes the first line in every paragraph bold.
P:first-line
{
font-weight:bold;
}
Makes the first letter in every paragraph be larger than the rest.
P:first-letter
{
font-size:large;
}






Hope it is helpful.
Cheers,
Bala