kokopelli Posted June 26, 2017 Share Posted June 26, 2017 In the simple example below, I had to repeat the background-color in the .second object, otherwise the section takes on the value of a child for the entire object. Noticed that this occurs of several of the attributes but not all. Example: font-family. Is there a way to better isolate the child items to only affect them? I am new to flexbox usage. <!DOCTYPE html> <html> <head> <title>Flexbox Test</title> <style> .container { max-width:900px; margin: 0 auto; display:flex; flex-wrap:nowrap; } .first { background-color:lightblue; max-width:60px; height:100vh; padding:20px; flex:1; } .second { background-color:yellow; //NEGATED BY .second, .d max-width:750px; height:100vh; padding:20px; flex:14; } .second, .a { background-color:tan; } .second, .b { background-color:lightgreen; } .second, .c { background-color:orange; font-family:Verdana, Arial, Helvetica, sans-serif; } .second, .d { background-color:pink; font-family:"Times New Roman", serif; } .third { background-color:fuchsia; max-width:60px; height:100vh; padding:20px; flex:1; } .second { background-color:yellow; // required for yellow background // if deleted background is pink } </style> </head> <body> <div class="container"> <div class="first"><p>Lorem ipsum dolor sit amet, elit. Ipsam soluta Lorem ipsum dolor sit amet, elit. Ipsam soluta</p></div> <div class="second"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam voluptatibus soluta, consequuntur, reiciendis Ipsam voluptatibus soluta, consequuntur, reiciendis</p> <div class="a"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam voluptatibus soluta, consequuntur, reiciendis</p></div> <div class="b"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam voluptatibus soluta, consequuntur, reiciendis</p></div> <div class="c"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam voluptatibus soluta, consequuntur, reiciendis</p></div> <div class="d"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam voluptatibus soluta, consequuntur, reiciendis</p></div> </div> <div class="third"><p>Lorem ipsum dolor sit amet, elit. Ipsam soluta Lorem ipsum dolor sit amet, elit. Ipsam soluta</p></div> </div> </body> </html> Link to comment Share on other sites More sharing options...
dsonesuk Posted June 26, 2017 Share Posted June 26, 2017 The reason it is pink is because you have '.second' class listed with .a, .b, .c, .d as a individual class selector because of the comma. You really don't require '.second' class with '.a' to '.d' classes, but if you do, remove the comma and it will then refer to parent class '.second' element whose child (defined by a space) element has class 'a', 'b', 'c' or 'd', as in .second .d Means parent element class who's child element has class of 'd' give pink background, while .second, .d Means class element '.second' AND class element 'd' will have pink background, and because it is last of group using '.second' class, it will take precedence over the previous background-colors defined. Link to comment Share on other sites More sharing options...
kokopelli Posted June 27, 2017 Author Share Posted June 27, 2017 Thanks, that clears it up for me. 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