CSS Selectors

In CSS, selectors are patterns used to select the element(s) you want to style.

Types for Selectors

Simple Selectors

It select the elements based on name, id, class

CSS Element Selector

The element selector selects HTML elements based on the element name.

p {
  text-align: center;
  color: red;
}

CSS ID Selector

The id selector uses the id attribute of an HTML element to select a specific element. To select an element with a specific id, write a hash (#) character, followed by the id of the element.

In this example all HTML elements with id="id" will be red and center-aligned:

#id {
  text-align: center;
  color: red;
}

CSS Class Selectors

The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name.

Example: In this example all HTML elements with class="btn-1" will be red and center-aligned:

.btn-1{
  text-align: center;
  color: red;
}

Chained Selector

When you want to specify that, only specific HTML elements should be affected by a class.

In this example only h1 elements with class="center" will be red and have a padding of 5px (top and bottom ) and 5px (left and right):

h1.center {
  padding:5px 5px;
  color: red;
}

Universal Selector

The universal selector (*) selects all HTML elements on the page.

The CSS rule below will affect every HTML element on the page:

* {
  display:block;
  padding:0;
  margin:0;
}

Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions. In group selectors, separate each selector with a comma.

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

CSS Combinators

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS:

• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)

Descendant Selector

The descendant selector matches all elements that are descendants of a specified element.

The following example selects all p elements inside div elements:

div p {
  background-color: yellow;
}

Child Selector (>)

The child selector selects all elements that are the children of a specified element.

The following example selects all p elements that are direct children of a div element:

div > p {
  background-color: yellow;
}

Adjacent Sibling Selector (+)

The adjacent sibling selector is used to select an element that is directly after another specific element. Sibling elements must have the same parent element, and "adjacent" means "immediately following".

The following example selects the first p element that are placed immediately after div elements:

div + p {
  background-color: yellow;
}

General Sibling Selector (~)

The general sibling selector selects all elements that are next siblings of a specified element. It uses ~ symbol to represent, means(zero or more) direct siblings.

The following example selects all p elements that are next siblings of nav elements:

nav~ p {
  background-color: yellow;
}

CSS [attribute] Selector

The [attribute] selector is used to select elements with a specified attribute.

The following example selects all a elements with a target attribute:

a[target] {
  background-color: yellow;
}

The following example selects all a elements with a target="_blank" attribute:

a[target="_blank"] {
  background-color: yellow;
}

CSS 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 following example formats the first line of the text in all p elements:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

The following example formats the first letter of the text in all p elements:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Pseudo-class Selector

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 mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus

Example: Links can be displayed in different ways:

/* 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;
}

Thanks for reading, I hope this article will helps you to style the web pages as you wish.