Get to know about CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

Simple selectors (select elements based on name, id, class)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)

Simple Selector

The CSS element Selector The element selector selects HTML elements based on the element name.
```
p {
text-align: center;
color: red;
}
```
The CSS class Selector 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.

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

The CSS id Selector The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.

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

-The CSS Universal Selector The universal selector (*) selects all HTML elements on the page.

* {
  text-align: center;
  color: blue;
}

-The CSS Grouping Selector The grouping selector selects all the HTML elements with the same style definitions. Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

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

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

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

CSS Combinators

-Descendant Selector The descendant selector matches all elements that are descendants of a specified element. The following example selects all

elements inside

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
elements that are children of a
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

element that are placed immediately after

elements:

div + p { background-color: yellow; }

General Sibling Selector (~) The general sibling selector selects all elements that are next siblings of a specified element.

The following example selects all

elements that are next siblings of

elements:

div ~ p {
  background-color: yellow;
}

CSS Pseudo-classes

Anchor Pseudo-classes 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;
}

Pseudo-classes and HTML Classes
```
a.highlight:hover {
color: #ff0000;
}
```

-Hover on

div:hover {
  background-color: blue;
}

-Simple Tooltip Hover

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

CSS - The :first-child Pseudo-class

p:first-child {
  color: blue;
}

CSS - The :lang Pseudo-class

<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>

CSS Pseudo-elements

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

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

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

The following example selects all elements with a target attribute:

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

Guide to CSS Selectors

Table of contents

Subscribe to my newsletter

Jay Bardia

Jay Bardia