rich_web_development Posted April 2, 2017 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted April 2, 2017 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 Link to comment Share on other sites More sharing options...
rich_web_development Posted April 2, 2017 Author Share Posted April 2, 2017 Thanks dude! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now