Chapter 9. IDs, Child Selectors and Pseudo Classes In CSS

26 Views

CSS (Cascading Style Sheets) is a powerful tool for styling web pages. Among its many features, the ability to target specific elements using IDs, child selectors, and pseudo-classes allows developers to create highly dynamic and responsive designs. In this blog, we’ll explore these three crucial aspects of CSS, demonstrating how to use them effectively in your projects.

IDs in CSS

An ID is a unique identifier assigned to an HTML element. It is used to apply specific styles to that element. IDs are defined using the id attribute in HTML and targeted in CSS with a # symbol.

Example of Using IDs

Here’s an example of how to use IDs to style an element:

<!DOCTYPE html>
<html>
<head>
    <style>
        #uniqueElement {
            color: white;
            background-color: blue;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="uniqueElement">This is a unique element.</div>
</body>
</html>

In this example, the div element with the id of uniqueElement is styled with a white text color, blue background, padding, and centered text.

Child Selectors in CSS

Child selectors allow you to select and style elements that are direct children of a specified parent element. The > symbol is used to denote a child selector.

Example of Using Child Selectors

Here’s an example of how to use child selectors:

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent > .child {
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">I am a direct child.</div>
        <div>
            <div class="child">I am not a direct child.</div>
        </div>
    </div>
</body>
</html>

In this example, only the div element with the child class that is a direct child of the parent class will be styled. The nested child element will not be affected.

Pseudo-Classes in CSS

Pseudo-classes are used to define the special state of an element. They can style elements when they are in a specific state, such as when they are hovered over, focused on, or visited.

Commonly Used Pseudo-Classes

:hover: Applies styles when the user hovers over an element.

   a:hover {
       color: blue;
   }

:focus: Applies styles when an element is focused.

   input:focus {
       border-color: green;
   }

:first-child: Applies styles to the first child of a parent element.

   p:first-child {
       font-weight: bold;
   }

:nth-child(): Applies styles to elements based on their position in a group of siblings.

   li:nth-child(odd) {
       background-color: #f0f0f0;
   }
   li:nth-child(even) {
       background-color: #ffffff;
   }

:not(): Applies styles to elements that do not match the specified selector.

   p:not(.excluded) {
       color: red;
   }

Example of Using Pseudo-Classes

Here’s an example demonstrating the use of various pseudo-classes:

<!DOCTYPE html>
<html>
<head>
    <style>
        a:hover {
            color: blue;
        }

        input:focus {
            border-color: green;
        }

        p:first-child {
            font-weight: bold;
        }

        li:nth-child(odd) {
            background-color: #f0f0f0;
        }

        li:nth-child(even) {
            background-color: #ffffff;
        }

        p:not(.excluded) {
            color: red;
        }
    </style>
</head>
<body>
    <p>This is the first paragraph.</p>
    <p class="excluded">This paragraph is excluded from the styling.</p>
    <p>This is another paragraph.</p>

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>

    <a href="#">Hover over this link.</a>
    <input type="text" placeholder="Focus on me">
</body>
</html>

In this example, various pseudo-classes are used to style elements based on user interactions and their position within the DOM.

Understanding and effectively using IDs, child selectors, and pseudo-classes in CSS can greatly enhance your ability to create dynamic, responsive, and well-organized styles. By mastering these concepts, you can target elements with precision, respond to user interactions, and maintain a clean and efficient stylesheet. Experiment with these techniques in your own projects to see how they can transform your web designs.