What is CSS Selectors ?

Selectors define which part(s) of your (X)HTML document will be affected by the declarations
you’ve specified. Several types of selectors are available in CSS.
Element Selectors
The most basic of all selectors is the element selector (you may have heard them called tag
selectors). It is simply the name of an (X)HTML element, and not surprisingly it selects all
of those elements in the document. Let’s look an example:

h1 {
color: blue;
}
h2 {
color: green;
}

We’ve used h1 and h2 as selectors. These are element selectors that select h1 and h2 elements within the (X)HTML document, respectively. Each rule indicates that the declarations in the declaration block should be applied to the selected element. So, in the previous example, all h1 elements in the page would be blue and all h2 elements would be green.
Class Selectors
So far we’ve been assigning styles exclusively to (X)HTML elements, using element selectors. Modern markup often involves the assigning of classes and IDs to elements. Consider the following example:

<h1 class="warning">Be careful!</h1>
<p class="warning">I like to work half a day. I don’t care
if it is the first 12 hours or the second 12 hours.</p>

Here, we’ve specified a class of warning to both the h1 element and the p element.
This gives us a hook on which we can hang styles that is independent of the element type. In
CSS, class selectors are indicated by a class name preceded by a period (.). for example:

.warning {
color: red;
font-weight: bold;
}

We can also join an element selector with a class selector like this

p.warning {
color: red;
font-weight: bold;
}

This rule will assign the red color and bold weight only to paragraph elements that have been
assigned the class warning. It will not apply to other type elements, even if they have the warning class assigned.
Class selectors can also be chained together to target elements that have multiple class
names. For example,

<h1 class="warning">Header warning!</h1>

<p class="warning help"> If people knew how hard I had to work to gain my mystery,
it wouldn’t seem wonderful at all.</p>
<p class="help">Michealangelo</p>
A .warning selector will target both the h1 and first p elements, since both have the class
value warning. A .help selector will target both p elements (both have a class value of help).
A chained selector such as .warning.help will select only the first paragraph, since it is the
only element that has both classes (warning and help) assigned to it.
ID Selectors
ID selectors are similar to class selectors, but they are prefaced by a pound sign (#) instead of
a period. ID selectors cannot be chained together, since it is invalid to have more than one ID on a given element in (X)HTML. However, it is possible to chain class selectors and ID selectors,
such as div#main-content.error.So, to select this div element:

<div id="main-content">
<p>This is the main content of the page.</p>
</div>

we would need a selector like this:

#main-content {
width: 400px;
}

or this:

div#main-content {
width: 400px;
}

Descendant Selectors
Descendant selectors, sometimes called contextual selectors, allow you to create style rules that
are effective only when an element is the descendant of another one. Descendant selectors are
indicated by a space between two elements.

ul li {
color: blue;
}

<ul>
<li>Item one</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 <li>
</li>
</ul>

 

Pseudo-classes

You may want to add style to items that aren't based on elements' name, attributes, or content. This example of pseudo-classes creates rollover effects:

a:link {

 color: blue;

}

a:visited {

 color: purple;

}

a:hover {

 color: red;

}

a:active {

 color: gray;

}

In this setup, a basic link appears in blue. As soon as the mouse pointer hovers over the link, it changes to red. During the clicking of the link, the link appears gray. When returning to the page with the link after visiting, the link appears purple.

Pseudo-elements

S a developer can style an item within a web document that's not marked up by elements through the use of pseudo-elements. Pseudo-elements consist of :first-letter, :first-line, :before, and :after.
Look into the example for pseudo-element in:first-letter

p:first-letter {

 font-size: 200%;

 font-weight: bold;

}