Jump to content

select two child elements of parent element using combinators


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 post
Share on other sites
header > h1, header > p{
        color:red;
    }
/*OR*/
    header > h1, header > h1 + p{
        color:red;
    }
/*Give header class name */

.colour_version01 {color:red;}
   <header class="colour_version01">
        <h1>Some text</h1>
        <p>Some more text</p>
    </header>

 

  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...