CSS Selectors

Let's take a quick look at CSS selectors with few examples.

What is CSS Selectors?

A CSS selector is the first part of the CSS rule and is used to select HTML elements you want to style.

CSS selectors are of five types.

1. Simple Selectors
2. Combinator Selectors.
3. Pseudo-Class Selectors
4. Pseudo-element Selectors
5. Attribute selectors

Simple Selector- Selects based on element name, Id, class.

Here are the types of simple selectors

Element selector-The element selector selects HTML elements based on the element name. ex:

h1 {
        background-image: url("Funbird.jpg");
    }

Universal selector(*) - Selects all elements in the html to style. Ex:

/* it selects whole html element elements on the page */
    /* aligns all the text to right in page with red color */

    * {
        background-color: red;
        text-align: right;
    }

Id selector (#) - Selects the element with id=”xyz”
Ex:

#xyz  {
text-align: center;
}

Class Selector(.) - Selects all elements with class=”ABC”

.ABC {
Color:red;
}

Grouping selector - Selects all the matching with the same style definitions. Ex:

H1 , h2, p {
text-align : center;
background-color:red;
}

Combinator selectors - can select more than one simple selector.

Four different types of combinators.

Descendant selector (space) – selects all elements that are descendant of a specified element.

Ex:

div p {
background-color-beige;
}

Child Selector(>) Selects all the elements that are children of specified element. Ex:

ul>li {
background-color- #ff12aa;
}

Adjacent sibling selector(+) Selects an element directly after the specific element. Ex

div+p{
background-color: #000000;
}

General Sibling selector(~) selects the next siblings of a specified element. Ex

div~p {
Background-color: #12ff89;
color:#000000;
}

Pseudo-selectors

Used to style only when those selectors meet certain conditions.

They are of two types.

Pseudo - Class selectors

Selects the elements based on the certain state. Style elements when a user mouses over it, visited links , unvisited link and also style an element when it gets focused.

Ex:

/* visited link*/
   <Style>
    a:visited {
        color: #469346;
    }
</style>

/* Unvisited link*/
    <style>
    a:visited {
        color: #a4099f;
    }
 </style>

/* mouse over link */
   <style>
     a:hover {
        color: #ff69b4;
    } 
</style>

/* selected link */
<style>    
 a:active {
        color: #0000ff;
    }
</style>

Note-Pseudo-class names are not case-sensitive.

Pseudo - Element selectors

A CSS pseudo-element is used to style specified parts of an element.

it is used to

1. Style the first letter, or line, of an element
2. Insert content before, or after, the content of an element

ex:

<style>
 p::first-line {
        color: #ff0000;
                font-family: Verdana, Geneva, Tahoma, sans-serif;
   }
</style>

Pseudo elements Selectors are as follows

1. ::after (Used to Insert something after the content of each element)
2. ::before (Used to Insert something after the content of each element::first-letter)
3. ::first-line (Selects the first line of each element)
4. ::first-letter (Selects the first letter of each element)
5. ::marker (Selects the markers of list items)
6. ::selection (Selects the portion of an element that is selected by a user)

Attribute Selectors

Style the html elements that having specific attributes

<Style>
 a[target="_blank"] {
        background-color: #ffff00;
    }

    input[type="text"] {
        background-color: #8a2be2;
    }
</style>