CSS Tutorials

Advanced Selectors and Combinator Usage

Elements can be chosen using CSS selectors and combinators, which take into account the elements' connections within the document tree. components can be chosen by advanced selectors according to their properties, states, or connections to other components.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Selectors Example</title>
    <style>
        /* Attribute selector */
        input[type="text"] {
            background-color: lightgray;
            border: none;
            padding: 10px;
        }

        /* Child combinator */
        .container > .child {
            color: red;
            margin: 5px;
        }

        /* Adjacent sibling combinator */
        h1 + p {
            font-size: 18px;
            color: green;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Text input">
    <div class="container">
        <div class="child">First child</div>
        <div class="child">Second child</div>
    </div>
    <h1>Heading</h1>
    <p>This paragraph is directly after a heading.</p>
</body>
</html>

Attribute Selector: input[type="text"] applies a specified background and padding to all <input> elements having a type of "text."

Child Combinator:.container >.child turns the immediate children of .container into red by selecting them and assigning them the class.child. Elements ending in.child that are not direct children are unaffected by this.

Adjacent Sibling Combinator: h1 + p modifies the font size and color of a paragraph that comes just after a <h1> element.

logo

CSS

Advanced Selectors and Combinator Usage

Beginner 5 Hours

Elements can be chosen using CSS selectors and combinators, which take into account the elements' connections within the document tree. components can be chosen by advanced selectors according to their properties, states, or connections to other components.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Selectors Example</title>
    <style>
        /* Attribute selector */
        input[type="text"] {
            background-color: lightgray;
            border: none;
            padding: 10px;
        }

        /* Child combinator */
        .container > .child {
            color: red;
            margin: 5px;
        }

        /* Adjacent sibling combinator */
        h1 + p {
            font-size: 18px;
            color: green;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Text input">
    <div class="container">
        <div class="child">First child</div>
        <div class="child">Second child</div>
    </div>
    <h1>Heading</h1>
    <p>This paragraph is directly after a heading.</p>
</body>
</html>

Attribute Selector: input[type="text"] applies a specified background and padding to all <input> elements having a type of "text."

Child Combinator:.container >.child turns the immediate children of .container into red by selecting them and assigning them the class.child. Elements ending in.child that are not direct children are unaffected by this.

Adjacent Sibling Combinator: h1 + p modifies the font size and color of a paragraph that comes just after a <h1> element.

Similar Data Science Tutorials

Related tutotials

Frequently Asked Questions for css

line

Mail us :

Address :

India

Pages

Categories

Copyrights © 2024 letsupdateskills All rights reserved