CSS Selectors

CSS selectors are the ways by which we select the HTML elements and style them. These HTML elements may be either single or in groups, either adjacent or in different places.

These selectors are basically divided into 4 categories:

1. Simple Selectors

2. Combinators Selectors

3. pseudo-class

4. pseudo-element

Simple Selectors: It selects html elements based on the id, class and tag.

Id: The #id selector styles the element based on the id attribute provided to HTML elements.

e.g. #firstname Selects the element with id=”firstname”

id selector

Class: The .class selector selects elements based on the class attribute provided to HTML elements.

e.g. . Heading selects the element with class=” Heading”

class selector

Tag: The tag selector element p Selects all <p> elements.

tag selector

Combinators Selectors: A combinator describes the relationship between the selectors. These are used between two or more html elements.

There are four different combinators in CSS:

1. descendant selector (space)

2. child selector (>)

3. adjacent sibling selector (+)

4. general sibling selector (~)

Descendant Selector:The descendant selector selects all elements that are inside of a specified element.

The following example selects all <span> elements inside <p> elements:

p span {
background-color: yellow;
}

Child Selector:The child selector selects all elements that are the children of a specified element (not grand-children).

The following example selects all <span> elements that are children of a <p> element:

p > span {
background-color: green;
}

Adjacent Sibling Selector:The adjacent sibling selector selects all elements that are just after the specified element. Sibling elements must have the same parent element, and “adjacent” means “immediately following”.

The following example selects all <span> elements that are placed immediately after <p> elements:

p + span {
background-color: green;
}

General Sibling Selector:The general sibling selector selects all elements that are siblings of a specified element.

The following example selects all <span> elements that are siblings of <p> elements:

p ~ span {
background-color: green;
}

pseudo-class:A pseudo-class is used to define a special state of an element.

For example, it can be used to:

Style an element when a user mouse over it

Style visited and unvisited links differently

Style an element when it gets focus

The syntax of pseudo-classes:

selector: pseudo-class {
property: value;
}

Anchor Pseudo-classes:Links can be displayed in different ways:

<a href=”www.google.co.in" target=”_blank”>This is a link</a>

/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */
a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}

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

For example, it can be used to:

• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element

The syntax of pseudo-elements:

selector::pseudo-element {
property: value;
}

before pseudo-element:The :: before pseudo-element can be used to insert some content before the content of an element.

h1::before {
content: url(smiley.gif);
}

After pseudo-element:The :: after pseudo-element can be used to insert some content after the content of an element.

h1::after {
content: url(smiley.gif);
}