CSS Selectors

Unveiling the Power of CSS Selectors: Navigating the Web Design Landscape

In the intricate realm of web development, where aesthetics and functionality converge, CSS (Cascading Style Sheets) serves as a crucial tool for crafting captivating and user-friendly interfaces. At the heart of this styling language lies a versatile feature known as "selectors" – the architects behind the virtual brushstrokes that paint the digital canvas. CSS selectors are the key to precisely targeting HTML elements, enabling developers to apply styles and bring their creative visions to life. From the foundational simplicity of tag selectors to the intricate specificity of attribute and pseudo-class selectors, this journey will delve into the diverse world of CSS selectors, offering insights into their classifications, applications, and their pivotal role in shaping the visual web experience. Whether you're a beginner taking your first steps into the world of web design or an experienced developer seeking to refine your skills, the exploration of CSS selectors promises to be an illuminating expedition into the art and science of designing for the digital realm.

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)
Pseudo-Classes start with a colon character (:).
Pseudo-Elements start with two colons (::).

* Universal Selector


            *  {
                Margin: 0;
                Padding: 0;
            }
With Out * Selector

H3

Div
Div
    UL
  • List Item
With * Selector

H3

Div
Div
    UL
  • List Item

The CSS Universal selector * matches elements of any type. The universal selector is a special type selector and can therefore be namespaced when using @namespace. This is useful when dealing with documents containing multiple namespaces such as HTML with inline SVG or MathML, or XML that mixes multiple vocabularies.
Above you will notice how the list item acts without the universal operator (*) in the first box, and with it the list item is moved left to beginning of parent and does not display bullets.
ns | * _ matches all elements in namespace ns,
* | * _ matches all elements,
| * _ matches all elements without any declared namespace

Element Selector


        div  {
            background-color: aquamarine;
        }

H3

Div
Div
    UL
  • List Item

The Element selector selects all of the specified element by HTML tag name. Example: body, nav, header tags, p, div, or semantics: section, aside, quote and so on. Above were calling the element Div and changing the background color to aquamarine. You will notice both Div containers are filled in.

Class Selector


        .class  {
            background-color: aquamarine;
        }

.class

Div
Div
    UL
  • List Item

The Class selector, selects elements with a specific class attribute. Select all elements with the specified class name. Above were selecting the element with the class name .class and changing the background to aquamarine. You will notice the .class box is filled in.

ID Selector


        #id  {
            background-color: aquamarine;
        }

#id

Div
Div
    UL
  • List Item

The ID selector matches an element based on the value of the element's id attribute. In order for the element to be selected, its id attribute must match exactly the value given in the selector. The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id. Note: The id name is case sensitive! The id name must contain at least one character, cannot start with a number, and must not contain white spaces (spaces, tabs, etc.).

Multiple Selectors


        #active.class  {
            background-color: aquamarine;
        }

#id

.class
Div
    UL
  • List Item

Chain two or more classes or Id's to select an element that have the specified class name or Id.

Comma Combinator


        .class-1, .class-2  {
            background-color: aquamarine;
        }

.class-1

Div
.class-2
    UL
  • List Item

You can write multiple selectors separated by commas, to apply the same rule to multiple sets of selected elements at once. Above we select .class-1 & .class-2.

Descendant Selector


        ul li  {
            background-color: aquamarine;
        }

H3

Div
Div
    UL
  • List Item

The Descendant combinator — typically represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc.) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors. Above we select the List Item in UL element.

Adjacent Selector


        .item-1 + div  {
            background-color: aquamarine;
        }

.item-1

Div
Div
    UL
  • List Item

The Adjacent sibling combinator + separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

Child Selector


        ul > li  {
            background-color: aquamarine;
        }

H3

Div
Div
    UL
  • List Item
  • List Item

The Child combinator uses a > sign to select element(s) that are direct children to the first element. Elements matched by the second selector must be the immediate children of the elements matched by the first selector. Above we select the List Item element in Ul.

General Sibling Selector


        .item-1 ~ div  {
            background-color: aquamarine;
        }

.item-1

Div
Div
    UL
  • List Item

The General Sibling combinator uses the tilde ( ~ ) sign to select every element that is preceded by the first element, without having to be a direct sibling to the first element.

Attribute Selector


        li[target]  {
            background-color: aquamarine;
        }

.item-1

Div
Div
    UL
  • List Item [Target]

The Attribute selector is used to select elements with a specified attribute. The following example selects all List Item elements with a target attribute.

Attribute & Attribute Value Selector


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

.item-1

[Target="_blank"]
Div
    UL
  • List Item [Target="_blank"]

Select element(s) that have the specified attribute and attribute value. The following example selects all elements with [target="_blank"], a target attribute & attribute value.

Attribute & one of the Attribute's Values Selector


        [target~="blue"]  {
            background-color: aquamarine;
        }

.item-1

[Target="blue"]
Div [Target="green blue"]
    UL
  • List Item [Target="_blank"]

The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word. The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "blue".

Attribute & Partial Value Selector


        [class*="te"]  {
            background-color: aquamarine;
        }

.item-1

[Class="text"]
Div [Class"green blue_test"]
    UL
  • List Item [Class="blank"]

The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value. The following example selects all elements with a class attribute value that contains "te".

Attribute & Starting Value Selector


        a[href⌃="http"]  {
            background-color: aquamarine;
        }
        a[href⌃="#"]  {
            background-color: lightblue;
        }
        a[href⌃="/"]  {
            background-color: lightgreen;
        }

.item-1

a[href⌃="http"]
a[href⌃="#"]
    UL
  • List Item a[href⌃="/"]

The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value. The following example selects all elements with a class attribute value that contains "te".

Attribute & Ending Value Selector


        [class$="test"]  {
            background-color: aquamarine;
        }

.item-1

[class="first_test"]
[class="test"]
    UL
  • List Item [class="second"]

The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value. The following example selects all elements with a class attribute with a value of "test" or ends with "test".

Pseudo-Class, Link Selectors


        Selector:Pseudo-class  {
            Property: value;
        }

        a:link {
            background-color: aquamarine;
        }
        a:visited {
            background-color: lightgreen;
        }
        a:hover {
            background-color: yellow;
        }
        a:active {
            background-color: lightblue;
        }

H3

a:active
a:hover
a:visited
a:link
    UL
  • List Item

A Pseudo-Class is used to define a special state of an element. You can use it to Style an element when a user mouses over it, Style visited and unvisited links differently, Style an element when it gets focus.
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

Attribute & Ending Value Selector


        [class$="test"]  {
            background-color: aquamarine;
        }

.item-1

[class="first_test"]
[class="test"]
    UL
  • List Item [class="second"]

The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value. The following example selects all elements with a class attribute with a value of "test" or ends with "test".

Disabled Input Element(s)


        input[type="text"] {
            background-color: aquamarine;
        }

        input[type="text"]:disabled {
            background-color: lightBlue;
        }

H3

Div
Div
    UL
  • List Item

The :disabled selector matches every disabled element (mostly used on form elements).

First-Child Selector


        div:first-child {
            background-color: aquamarine;
        }

First-child

Second-child
Third-child
Fourth-child
    (UL) Fifth-child
  • (List Item) Grand-Child

The first-child selector selects the first child of it's parent. Select and style every element that is the first child of its parent:

Last-Child Selector


        div:last-child {
            background-color: aquamarine;
        }
First-child
Second-child
Third-child
Fourth-child

The :last-child selector matches every element that is the last child of its parent.

Nth-Child Selector


    (Selects every odd-numbered child)
   :nth-child(odd)  OR :nth-child(2n+1)

   (Selects every even-numbered child)
   :nth-child(even)  OR :nth-child(2n)


    div:nth-child(Even) {
        background-color: aquamarine;
    }
1 ODD
2 EVEN
3 ODD
4 EVEN
5 ODD

The :nth-child pseudo-class targets elements based on their position within their parent, allowing for a wide variety of selections. Nth-child also lets you select elements in patterns. The 'n' in the formula is like a counter, letting you target elements in repeating cycles. For instance, :nth-child(3n) would target every third element.

Nth-Last-Child Selector


    div:nth-last-child(2) {
        background-color: aquamarine;
    }
1 ODD
2 EVEN
3 ODD
4 EVEN
5 ODD

The :nth-last-child pseudo-class is similar to :nth-child, but it counts from the last child backwards.

Only-Child Selector


    div:only-child(2) {
        background-color: aquamarine;
    }
Child 1
Child 2
Only Child

The :only-child pseudo-class targets an element if it's the only child element of its parent.

First-Of-Type Selector


    div:first-of-type {
        background-color: aquamarine;
    }
H3
P
Div 1
Div 2

The :first-of-type pseudo-class targets the first element of its type within its parent.

Last-Of-Type Selector


    p:last-of-type {
        background-color: aquamarine;
    }
P
P
Div 1
Div 2

The :last-of-type pseudo-class targets the last element of its type within a parent. Above we select the last type of P element.

Nth-Of-Type Selector


    p:nth-of-type(3) {
        background-color: aquamarine;
    }
P
P
P
Div 2

The :nth-of-type pseudo-class matches elements based on their type and position among siblings. Above we select the 3rd P element.

Nth-Last-Of-Type Selector


    div:nth-last-of-type(3) {
        background-color: aquamarine;
    }
P
div 1 (3rd from last)
Div 2 (2nd from last)
Div 3 (1st from last)

The :nth-last-of-type pseudo-class matches elements based on their type and position among siblings, but counting from the end! Above we select the 3rd div element from the last div.

Only-Of-Type Selector


    :only-of-type {
        background-color: aquamarine;
    }
P
div
Div
Div

The :nth-last-of-type pseudo-class targets an element that is the only element of its type among its siblings.

Not() Selector


    div:not() {
        background-color: aquamarine;
    }
Div
Div
Div With/ .exclude
Div

The :not() functional pseudo-class allows you to target elements that do not match a specified selector or condition. It's essentially an exclusion filter! Above we target everything except the .exclude class.

Has() Selector


    div:has(p.special) {
        background-color: aquamarine;
    }
P Parent

Child

P Parent .special

Child

The :has() functional pseudo-class allows to style an element if it contains a certain element or another selector. Above we select and style the Parent if the child is a P element with a class of .special.

First Letter Selector


    p::first-letter {
        font-size: 2rem:
    }
Paragraph

The ::first-letter pseudo-element is used to style the first letter of a block-level element, allowing for design elements like drop caps. Above we select the first letter and add font-size: 2rem; to the first letter.

First Line Selector


    p::first-line {
        font-size: 1rem:
        color: blue;
    }
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis similique assumenda

P -Element

The ::first-line pseudo-element is used to style the first line of a block-level element. This allows for typographic effects that can adapt dynamically based on the size of the containing element and the font size.

PlaceHolder Selector


    input::placeholder {
        color: blue;
    }
Div

The ::placeholder pseudo-element is used to style the placeholder text of form fields like input and textArea

Selection Selector


        ::selection {
            background-color: limegreen;
        }
Div Highlight Me with pointer!
Div
Div Highlight Me See the difference!
Div

The ::selection pseudo-element is used to style the portion of an element that has been highlighted or selected by the user. Note: when a user clicks and drags to select text, the ::selection pseudo-element can be used to modify the background color, text color, and other styles of that selection. Above the element targeted by selection will highlight lime green.

Marker Selector


        li::marker {
            color: red;
        }
Div
Div
    UL
  • Li

The ::marker pseudo-element is used to style marker boxes in list items, which typically contain bullets (for unordered lists) or numbers/letters (for ordered lists). Above notice the red dot, instead of it being black.

This is the end of the visual guide, I will be adding more over time. I appreciate the visit and hope you found this useful to visualize what a selector does. Below you can contact me for any questions or concerns.


Contact/Questions: questions@noobiej.tech

YouTube

Top