Prev Next

CSS Selectors

CSS selectors are patterns used to target HTML elements and apply styles to them. Selectors can be simple (e.g., targeting elements by tag or class) or complex (e.g., combinators and pseudo-classes). Understanding selectors is fundamental to applying CSS effectively.

Key Topics

Simple Selectors

Simple selectors target elements by their tag, class, or ID:

  • Tag Selector: Targets all elements of a specific tag (e.g., p).
  • Class Selector: Targets elements with a specific class (e.g., .class-name).
  • ID Selector: Targets an element with a specific ID (e.g., #id-name).
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Selectors</title>
    <style>
        p {
            color: blue;
        }
        .highlight {
            background-color: yellow;
        }
        #unique {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>This is a paragraph.</p>
    <p class="highlight">This paragraph has a class.</p>
    <p id="unique">This paragraph has an ID.</p>
</body>
</html>

Explanation: Tag selectors apply to all p elements, class selectors to elements with the highlight class, and ID selectors to the element with ID unique.

Attribute Selectors

Attribute selectors target elements based on their attributes:

  • [type="text"]: Targets all elements with type="text".
  • [href^="https"]: Targets all elements whose href starts with https.
  • [class*="button"]: Targets elements whose class contains button.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute Selectors</title>
    <style>
        [type="text"] {
            border: 1px solid blue;
        }
        [href^="https"] {
            color: green;
        }
        [class*="button"] {
            padding: 5px;
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Enter text here">
    <a href="https://example.com">Secure Link</a>
    <div class="big-button">Clickable Button</div>
</body>
</html>

Explanation: Attribute selectors target elements based on their attributes, values, or partial matches.

Pseudo-classes

Pseudo-classes define the state of an element, such as hover or focus:

  • :hover: Applies when the user hovers over the element.
  • :focus: Applies when the element is focused.
  • :nth-child(odd): Targets odd-numbered children of a parent.

Pseudo-elements

Pseudo-elements style specific parts of an element, like the first letter or line:

  • ::before: Adds content before the element.
  • ::after: Adds content after the element.
  • ::first-letter: Styles the first letter of a block element.

Key Takeaways

  • CSS Selectors are the foundation for applying styles to specific HTML elements.
  • Simple selectors target elements by tag, class, or ID.
  • Attribute selectors allow for more advanced targeting based on element attributes.
  • Pseudo-classes and pseudo-elements enable dynamic and part-specific styling.
Prev Next