The Web Developer Bootcamp 2024
Colt Steele
CSS Basic Selectors
Basic Selectors
- Element Selector
- select element by it's name
- eg. h1, p, a, etc.
- Universal Selector | * (asterisk)
- selects all elements
- Combine Selector | , (comma)
- combines multiple elements
- Class Selector | . (period)
- selects specific class element
- ID Selector | # (pound)
- selects specific id element
Combinator Selectors
- Descendant Selector | (space)
- matches all elements that are descendants of a specified element
- eg. [ p a ] | selects all a tags inside a p tag
- Adjacent Selector | + (plus)
- used to select a single element that is directly after another specific element
- the sibling element must have the same parent element, and "adjacent" means "immediately following"
- eg. [ h1 + p ] | selects the first p tag that is adjacent to an h1 tag
- Direct Child Selector | > (greater than)
- selects all child elements
- eg. [ div > li ] | selects all li elements that are a child to a div element
- General Sibling Selector | ~ (tilde)
- selects all elements that are the next siblings of a specified element
- eg. [ div ~ p ] | selects all p elements that are the next siblings after a div element
Attribute Selector
- Selects all elements based on a specific criteria
- eg. input [type="text"] {} ] | selects all input tags that are type text
- W3Schools More Info
- MDN More Info
: Pseudo Classes
- W3Schools Pseudo-Class
- MDN Pseudo-Class
- pseudo-classes are used to define a special state of an element.
- For example it can be used to,
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus
- and many more.
- :hover
- styles an element when the mouse is hovered over it
- :active
- styles the element when clicked with the mouse
- :checked
- styles and radio or checkbox that is checked
- :first-child
- selects the element that is the first child of its parent (among a group of sibling elements)
- :nth-child()
- selects the element that is the nth child of its parent (among a group of sibling elements)
- :nth-of-type()
- matches every element that is the nth child, of the same tag (type), of its parent
- can be a number/index, a keyword (odd or even), or a formula (like an + b)
- W3Schools More Info
- MDN More Info
- :not()
- matches any element that is NOT the specified element/selector
- W3Schools More Info
- MDN More Info
:: Pseudo Elements
- W3Schools Pseudo Elements
- MDN Pseudo Elements
- A CSS pseudo-element is used to style specified parts of an element
- For example, it can be used to:
- Style the first letter, or line, of an element
- Insert content before, or after, the content of an element
- Some examples
- element::first-letter
- styles the "first letter" of an element
- element::first-line
- styles the "first line" of an element, such as a paragraph
- element::selection
- styles page items that would be selected by the user. For example,
- if a user selects some text on a webpage, change the background color of the selected text.
- select any text on this page to see the result
- styles page items that would be selected by the user. For example,