CSS Section 2

Selectors

Selectors are used to target HTML elements and apply the same CSS properties to them.

There are several types of selectors:

• Element Selector: Selects all elements of a given type. You can also select multiple types by listing them with commas.
• ID Selector: Targets a specific element with a unique id attribute. Syntax: #idname { color: black; }
• Class Selector: One of the most commonly used selectors. It allows you to style multiple elements using a shared class attribute. Syntax: .classname { color: blue; }
• Descendant Selector: Selects elements nested inside a specific element. Syntax: parent child { }
• Adjacent Sibling Selector: Selects an element that comes immediately after another. Example: h1 + p { color: red; }
• Direct Child Selector: Selects only direct child elements. Example: div > li { }
• Attribute Selector: Selects elements that contain a specific attribute. Example: input[type="text"] { }

If you want to apply a property to all elements, you can use the universal selector: *

Pseudo-Classes

Pseudo-classes are keywords added to selectors that define a special state of an element.

Syntax: selector:pseudoclass { property: value; }

• :hover – When the mouse is hovering over an element.
• :active – When an element (like a link) is being clicked.
• :checked – When a checkbox or radio button is checked.
• :nth-of-type() – Targets elements based on their order. Example:
  • :nth-of-type(3) selects the third matching element.
  • :nth-of-type(3n) selects every third element (3, 6, 9...)

Read the MDN documentation for more pseudo-classes.

Pseudo-Elements

Pseudo-elements allow you to style specific parts of elements.

Syntax: selector::pseudo-element

Examples include ::before, ::after, ::first-line, and ::first-letter.

Read MDN for more details.

If you add !important to a CSS property, it will override all other rules regardless of order.

CSS Inheritance

Some CSS properties (like color and font-family) are inherited by child elements from their parent.