Jump to content

Flexbox question


kokopelli

Recommended Posts

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

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

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...