Selectors

Guide: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors
Quick Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Basic Terms

CSS Rules: Target one or more HTML elements, and Define CSS Properties and Their Values
Selectors: The first part of CSS Selectors
The Elements that are target of selectors are called Subjects

Selector Types:

Basic Selectors:

Type (or tag), eg body {color: red}

class selector, eg .index {color: blue}

ID Selector, eg #body_id {display: flex}

attribute selector, eg [src] or a[title] or a[href="https://example.com"]

Universal Selectors, eg * {color: red} will match all elements in the document

Grouping Selectors (Selector List): div, span will match both div and span

Combinators:

Descendant combinators ( A B ) B is contained in A, immediately or not

Immediate Child Combinator ( A > B ) B is immediate child of A

General Sibling Combinator ( A ~ B ) B follows A, immediately or not

Adjacent Sibling Combinator ( A + B ) Meaning B must appear right after A

Pseudo Selectors:

Pseudo Class Selector: Select Elements based on State:

:hover

:focus

:visited (for links)

:root (similar to html Type Selector, but with higher specificity)

:last-child

Pseudo Elements:

*::first-line (the first line of text of all elements in the document)

p::first-letter (the first letter of text of all p elements in the document)

Class Selectors

This code selects all elements that have the class highlight

.highlight {
    background-color: yellow;
}

This code selects all <div> elements that also have the class highlight. Notice that there is no space between the div and the .highlight.

In other words, this is targeting classes on particular elements

div.highlight {
    background-color: yellow;
}

This code selects all elements that have the class .highlight that are direct or indirect descendants of a div element. Notice the whitespace between the div and the .highlight

In other words, this is Descendant combinator

div .highlight {
    background-color: yellow;
}

Which is equivalent to (notice the universal selector *)

div *.highlight {
    background-color: yellow;
}

This code selects elements that have both classes together, notice the lack of space between the two class selectors (if there was a space it would be a descendant combinator)

.notebox.danger {
  border-color: red;
  font-weight: bold;
}

Universal Selectors

Here’s a good link to show good use cases for universal selectors

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#using_the_universal_selector_to_make_your_selectors_easier_to_read

This code resets all HTML elements margins, usually find in normalizing stylesheets

* {
    margin: 0
}

This This code Doubles the size of text of the first letter of text of all elements in the document

*::first-letter {
    font-size: 200%
}

This selector targets all elements that is the first-child if their respective parent, whether or not The are a direct descendant to an article element.

article :first-child {
    margin: 0
}

/* equivalent to */

article *:first-child {
    margin: 0
}

The following selector, on the other hand, does something completely different. It targets article elements That are themselves the first-child of their respective parents

article:first-child {
    margin: 0
}

ID Selectors

An ID selector begins with a # rather than a dot character, but is used in the same way as a class selector. However, an ID can be used only once per page, and elements can only have a single id value applied to them.

The first example below selects the element that has the id one. The second snippet targets a class, and the third targets a specific ID within this class with a different font property

#one {
    background-color: yellow;
}

.red {
        min-height: 300px;
        min-width: 200px;
        background-color: red;
        font-size: 20px;
    }

.red#first{
    font-size: 30px;
}

attribute selectors

This is a great reference to lookup

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors#presence_and_value_selectors

Pseudo-Class and Pseudo-Elements

Here is a good reference:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#reference_section

Inserting content with CSS !!

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#generating_content_with_before_and_after