Pseudo-elements

• A CSS pseudo-element is a keyword that is added to a selector to style a specific, abstract part of an element
• Unlike a regular element, a pseudo-element is not explicitly written in the HTML markup; it is a "virtual" element that the browser creates and can be targeted with CSS for styling
• Pseudo-elements are indicated by a double colon (::) to distinguish them from pseudo-classes, which use a single colon

Categories and common examples

• ::before: Inserts content as the first child of the selected element
• ::after: Inserts content as the last child of the selected element
• ::first-letter: pseudo-element styles the first letter of the first line of a block-level element
• ::first-line: This styles the first line of a block-level element

Combinators

Combinators are special characters or symbols used in CSS to combine multiple selectors, allowing you to select and style elements based on their position and hierarchical relationship with other elements in the HTML document

There are four primary types of combinators

• Descendant combinator (space): Matches elements that are descendants of a specified element
• Child combinator (>): Matches elements that are direct children of a specified element
• Adjacent sibling combinator (+): Matches an element that is the immediate next sibling of a specified element and shares the same parent
• General sibling combinator (~): Matches all sibling elements that follow a specified element and share the same parent