CSS Selectors

CSS (Cascading Style Sheets) is a powerful tool for styling web pages, and selectors are a fundamental part of this process. Selectors allow you to target specific HTML elements and apply styles to them. Understanding the different types of CSS selectors and how to use them effectively is essential for any web developer. In this guide, we will explore the various CSS selectors and provide examples to illustrate their use.

What Are CSS Selectors?

CSS selectors are patterns used to select the HTML elements you want to style. A selector points to the HTML element(s) you want to style, and the declaration block contains the styles you want to apply.

Basic CSS Selectors:

Element Selector:

The element selector targets HTML elements by their tag name. This is the most basic type of selector.

p {
    color: blue;
}

This example will style all <p> elements with blue text.

Class Selector:

The class selector targets elements based on the class attribute. Class selectors are prefixed with a dot ..

.highlight {
    background-color: yellow;
}

This example will style any element with the class highlight by giving it a yellow background.

ID Selector:

The ID selector targets a single element based on its id attribute. ID selectors are prefixed with a hash #.

#main-header {
    font-size: 24px;
    text-align: center;
}

This example will style the element with the id main-header by setting the font size to 24 pixels and centering the text.

Universal Selector

The universal selector targets all elements on the page and is represented by an asterisk *.

* {
    margin: 0;
    padding: 0;
}

This example will remove the default margin and padding from all elements.

Combinator Selectors:

Descendant Selector:

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

div p {
    color: green;
}

This example will style all <p> elements that are inside <div> elements with green text.

Child Selector:

The child selector targets elements that are direct children of a specified element. It is represented by the greater-than sign >.

ul > li {
    list-style-type: none;
}

This example will style only the <li> elements that are direct children of <ul> elements, removing their bullet points.

Adjacent Sibling Selector:

The adjacent sibling selector targets an element that is immediately preceded by a specified element. It is represented by the plus sign +.

h1 + p {
    margin-top: 0;
}

This example will style the first <p> element that immediately follows an <h1> element by removing its top margin.

General Sibling Selector:

The general sibling selector targets all elements that are siblings of a specified element. It is represented by the tilde ~.

h1 ~ p {
    color: gray;
}

This example will style all <p> elements that are siblings of an <h1> element with gray text.

Attribute Selectors:

Attribute selectors target elements based on the presence or value of an attribute.

[attribute]:

This selector targets elements with a specified attribute.

a[target] {
    color: red;
}

This example will style all <a> elements that have a target attribute with red text.

[attribute=”value”]:

This selector targets elements with a specified attribute value.

input[type="text"] {
    border: 1px solid black;
}

This example will style all <input> elements with the attribute type set to text by giving them a black border.

[attribute~=”value”]:

This selector targets elements with an attribute value containing a specified word.

[class~="btn"] {
    background-color: blue;
}

This example will style all elements with a class attribute containing the word btn by giving them a blue background.

[attribute^=”value”]:

This selector targets elements with an attribute value starting with a specified value.

a[href^="https"] {
    color: green;
}

This example will style all <a> elements with an href attribute that starts with https by giving them green text.

[attribute$=”value”]:

This selector targets elements with an attribute value ending with a specified value.

a[href$=".pdf"] {
    color: orange;
}

This example will style all <a> elements with an href attribute that ends with .pdf by giving them orange text.

[attribute*=”value”]:

This selector targets elements with an attribute value containing a specified substring.

a[href*="example"] {
    color: purple;
}

This example will style all <a> elements with an href attribute that contains the substring example by giving them purple text.

Pseudo-class Selectors:

Pseudo-class selectors target elements based on their state or position.

:hover:

This selector targets elements when they are being hovered over by the cursor.

a:hover {
    text-decoration: underline;
}

This example will underline all <a> elements when they are hovered over.

:first-child:

This selector targets the first child element of its parent.

p:first-child {
    font-weight: bold;
}

This example will bold the first <p> element within its parent.

:nth-child(n):

This selector targets the nth child element of its parent.

li:nth-child(2) {
    color: red;
}

This example will style the second <li> element within its parent with red text.

Pseudo-element Selectors:

Pseudo-element selectors target specific parts of an element.

::before:

This selector inserts content before the content of an element.

h2::before {
    content: "§ ";
    color: gray;
}

This example will insert a gray section symbol before the content of all <h2> elements.

::after:

This selector inserts content after the content of an element.

p::after {
    content: "¶";
    color: gray;
}

This example will insert a gray pilcrow symbol after the content of all <p> elements.

Conclusion:

CSS selectors are essential for targeting and styling specific HTML elements. By mastering the various types of selectors, including basic, combinator, attribute, pseudo-class, and pseudo-element selectors, you can create more precise and efficient stylesheets. Understanding and using these selectors effectively will enable you to build well-styled and maintainable web pages.