Jump to content

select two child elements of parent element using combinators


rich_web_development

Recommended Posts

Hi,

Sorry, in advance, if this is a simple question.

I want to be able to use CSS combinators to select two child elements of a parent element.

I know it can be done various other ways.

Could someone please let me know if I can use combinators to achieve this effect.

So for example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
    /* I want to achieve this effect WITH COMBINATORS! but header h1 and p selected in one go instead of having to do it twice */
    header > h1{
        color:red;
    }
    header > p{
        color:red;
    }
    main > h1{
        color:green;
    }
    main > p{
        color: green;
    }

    /* texts stays black/*
    /*header h1 > p{
        color: red;
    }*/
    /* text stays black */
    /*header + h1 p{
        color:red;
    }*/
    /* Text stays black/*
    /*header + h1 + p{
        color:red;
    }*/
    /*Only the p is red
    header > h1 + p{
        color:red;
    }*/

    /*header > h1 p{
        color:red;
    }*/
    /*Doesn't work
    header > h1 > p{
        color:red;
    }*/
    /*Doesn't work
    header h1 p{
        color:red;
    }*/
</style>
</head>
<body>
    <header>
        <h1>Some text</h1>
        <p>Some more text</p>
    </header>

    <main>
        <h1>Some text</h1>
        <p>Some more text</p>
    </main>
    
</body>
</html>

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...