CSS Selectors

CSS selectors are patterns that you use to select the element(s) you want to style. They are the foundation of CSS, allowing you to precisely target specific HTML elements on your web page.

Basic Selectors

These are the most fundamental types of selectors:

Type (or Tag) Selector: Selects all elements of a specific type.
Class Selector: Selects all elements with a specific class attribute.
ID Selector: Selects a single element with a specific ID attribute.
Universal Selector: Selects all elements on the page.

Examples of Basic Selectors:


/* Type Selector */
p {
    color: blue;
}

/* Class Selector */
.highlight {
    background-color: yellow;
}

/* ID Selector */
#main-title {
    font-size: 2em;
    color: green;
}

/* Universal Selector */
* {
    margin: 0;
    padding: 0;
}

Combinators

Combinators are used to combine selectors and define relationships between elements:

Descendant Combinator (space): Selects elements that are descendants of another element.
Child Combinator (>): Selects elements that are direct children of another element.
Adjacent Sibling Combinator (+): Selects an element that is immediately preceded by another element.
General Sibling Combinator (~): Selects all elements that are siblings of another element and follow it.

Examples of Combinators:


/* Descendant Combinator */
div p {
    font-weight: bold;
}

/* Child Combinator */
ul > li {
    list-style-type: circle;
}

/* Adjacent Sibling Combinator */
h2 + p {
    margin-top: 5px;
}

/* General Sibling Combinator */
h3 ~ div {
    border: 1px solid #ccc;
}

Attribute Selectors

These selectors target elements based on their attributes:

[attribute]: Selects elements with a specific attribute, regardless of its value.
[attribute=value]: Selects elements with a specific attribute and value.
[attribute~=value]: Selects elements where the attribute value contains a specific word (space-separated).
[attribute|=value]: Selects elements where the attribute value starts with a specific word (hyphen-separated).
[attribute^=value]: Selects elements where the attribute value begins with a specific string.
[attribute$=value]: Selects elements where the attribute value ends with a specific string.
[attribute*=value]: Selects elements where the attribute value contains a specific substring.

Examples of Attribute Selectors:


/* Selects all input elements with a 'required' attribute */
input[required] {
    border-color: red;
}

/* Selects all link elements with an 'href' attribute starting with 'https://' */
a[href^="https://"] {
    color: purple;
}

/* Selects all elements with a 'data-id' attribute containing 'user' */
[data-id*="user"] {
    opacity: 0.8;
}

Pseudo-classes

Pseudo-classes select elements based on their state or position:

Pseudo-class	Description
`:hover`	When an element is being hovered over by the user's mouse.
`:active`	When an element is being activated by the user (e.g., clicked).
`:focus`	When an element has received focus (e.g., an input field).
`:first-child`	Selects the first child element of its parent.
`:last-child`	Selects the last child element of its parent.
`:nth-child(n)`	Selects the nth child element of its parent.
`:not(selector)`	Selects elements that do NOT match the given selector.

Pseudo-elements

Pseudo-elements select a specific part of an element:

::before: Inserts content before the content of an element.
::after: Inserts content after the content of an element.
::first-line: Selects the first line of a block-level element.
::first-letter: Selects the first letter of a block-level element.
::selection: Selects the portion of an element that is highlighted by the user.

Example of Pseudo-elements:


/* Styling the first letter of a paragraph */
p::first-letter {
    font-size: 2em;
    color: red;
    float: left;
    margin-right: 5px;
}

/* Adding a decorative icon before list items */
li::before {
    content: "👉 ";
    margin-right: 5px;
}

Mastering CSS selectors is crucial for efficient and precise styling of your web pages. Experiment with these selectors to understand their behavior and power!