CSS Selector

CSS selectors are one of the most important parts of CSS. They provides the ability to target the HTML elements on the web page that we want to style.

The CSS selector is the first part of a CSS rule. It is a pattern of elements and other words that tells the browser which HTML elements should be selected to have CSS property values within the rule that applies to them. The element or elements selected by the selector are called the subject of the selector.

The selector indicates the HTML element you want to style.

A CSS selector is a pattern for matching elements on a web page. The CSS style rules associate with those CSS selector will be apply to elements that matches selector pattern.

CSS selectors are one of the most important part of CSS because they allows to target specific elements on web page in a various ways to style them.

• CSS selectors define elements to which a set of CSS rules are applied.
• The selector is an HTML element that you want to style.
• Web Scraper uses CSS selectors to discover HTML elements in the web pages and extracts the data from them.
• These tell the browser which elements to apply CSS property values to.

Syntax

1. selector { property: value; }

---

Types of CSS Selector

There are many different types of CSS selectors, each with its own specific syntax.

1. Simple selectors
2. Combinator selectors
3. Pseudo-class selectors
4. Pseudo-elements selectors
5. Attribute selectors

Simple Selector

It selects elements based on name, id, class

Simple CSS selectors directly select one or more elements based on the type, class, or id of the element.

Simple selectors are the most usualy used CSS selectors which helps in styling HTML tags such as section, div, h1, article , etc. tags and its elements that have ID's and classes.

Types of CSS Simple Selector

There are five types of CSS simple selector

1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

---

Combinator selectors

Combinator is something that explains the relationship between selectors.

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

CSS selectors are patterns used to select elements for style purposes.

Types of css combinators

There are four different combinators in CSS

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

---

Pseudo-classes selector

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

CSS pseudo-classes are used to add special effects to some selectors. You don't need to use JavaScript or any other script to use those effects.

---

Pseudo-Elements

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

CSS pseudo-elements are used to add special effects to some selectors.

---

Attribute selector

The attribute selector is used to select elements with the specified attribute.

It is a famous way to style HTML elements through grouping them depending on certain attributes and this will select those elements with same attributes.

Types of attribute selector

There are two types of css attribute selector.

1. Presence and value selectors
2. Substring matching selectors

---