How to style a checkbox using CSS ?

How to Select all Child Elements Recursively using CSS?

Last Updated : 13 Jan, 2025

Here are three methods to achieve to Select all Child Elements Recursively using CSS:

1. Using the Universal Selector (*)

The universal selector applies styles to all child elements within a parent recursively.

HTML

<html>
<head>
    <style>
        .parent * {
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="parent">
        <p>First child</p>
        <div>
            <p>Nested child</p>
        </div>
    </div>
</body>
</html>

In this Example:

The * selector targets all descendant elements of .parent and applies the styles.
It selects children at all levels, ensuring consistent styling.

2. Using Descendant Combinator ( )

The descendant combinator targets all nested child elements of a parent element.

html

<html>
<head>
    <style>
        .parent p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <p>Direct child</p>
        <div>
            <p>Nested child</p>
        </div>
    </div>
</body>
</html>

In this Example:

The descendant combinator (.parent p) applies styles to all <p> elements within .parent, regardless of nesting.

3. Using Direct Child Selector (>)

This method applies styles only to the direct children of a parent element.

html

<html>
<head>
    <style>
        .parent > p {
            color: red;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="parent">
        <p>Direct child</p>
        <div>
            <p>Nested child</p>
        </div>
    </div>
</body>
</html>

In this Example:

The > selector targets only the direct <p> children of .parent, leaving deeper descendants unaffected.

How to style a checkbox using CSS ?

K

KV30

Improve

Article Tags :

Similar Reads

How to Blur an Image using CSS?

In CSS, the filter property is used to apply visual effects to images, such as blurring, grayscale, brightness adjustments, and more. One common use of the filter property is to apply a blur effect to an image, giving it a soft, out-of-focus appearance. Syntax: filter: blur(radius);radius: Defines t

How to make an image center-aligned (vertically & horizontally) inside a bigger div using CSS ?

We will know how to center-align the image in a div tag using CSS & will also understand its implementation through the example. Given an image, we need to set the image that align to the center (vertically and horizontally) inside a bigger div. But first let's create a basic structure, in which

What does the CSS rule â€œclear: bothâ€ do?

The clear property is used to specify which side of floating elements are not allowed to float. It sets or returns the position of the element about floating the objects. The "clear: both" means floating the elements are not allowed to float on both sides. It is used when no need for any element to

How to Break Line Without using <br> Tag in HTML / CSS?

Breaking lines in HTML without <br> tags can be achieved using block-level elements such as <div> or <p> combined with CSS properties like display: block; or display: inline-block; and others. These elements naturally wrap text or content, facilitating clean and structured layout d

Set the size of background image using CSS ?

Setting the size of a background image using CSS allows you to control how the image fits within an element. By using the background-size property, you can specify the width and height, ensuring the image scales appropriately for responsive design. Syntax: background-size: width height;Note: If the

What is Greater-than Sign (>) Selector in CSS?

In CSS, the greater than sign (>) is known as the child combinator selector. It is used to style elements that have a specific parent. Unlike other selectors, it only targets direct children of an element, meaning it only looks one level down in the HTML structure. How the Child Combinator Select

How to Select all Child Elements Recursively using CSS?

Here are three methods to achieve to Select all Child Elements Recursively using CSS: 1. Using the Universal Selector (*)The universal selector applies styles to all child elements within a parent recursively. [GFGTABS] HTML <html> <head> <style> .parent * { color: blue; font-weigh

How to style a checkbox using CSS ?

Styling a checkbox using CSS involves customizing its appearance beyond the default browser styles. This can include changing the size, color, background, and border, and adding custom icons or animations. Techniques often involve hiding the default checkbox and styling a label or pseudo-elements fo

What is the difference between â€œword-break: break-allâ€ versus â€œword-wrap: break-wordâ€ in CSS ?

The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. Difference between the "word-break: break-all;" and "word-wrap: break-word;" word-break:

How to make div height expand with its content using CSS ?

When designing a webpage, ensuring that a div adjusts its height according to its content is important for creating a flexible and responsive layout. By using CSS, you can easily make a div adapt to varying content sizes, which is particularly useful when dealing with dynamic or unpredictable conten