rich_web_development 0 Posted April 2, 2017 Report Share Posted April 2, 2017 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> Quote Link to post Share on other sites
dsonesuk 921 Posted April 2, 2017 Report Share Posted April 2, 2017 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> 1 Quote Link to post Share on other sites
rich_web_development 0 Posted April 2, 2017 Author Report Share Posted April 2, 2017 Thanks dude! Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.