symble usage

+2 Eddie Davis · July 27, 2014
What is the main purpose of the > symbol with a responsive design?

#main > article 
#main > nav
#main > aside
#main > article, #main > nav, #main > aside

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
  body {
   font: bold 14px Helvetica;
   background: #333333;
  }
  #main {
   min-height: 500px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main > article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 5pt;
   background: #dddd88;
   <!-- background-image: radial-gradient(farthest-corner at 50% 50%, #363636, #B7B7B7); -->
   -webkit-flex: 3 1 70%;
           flex: 3 1 70%;
   -webkit-order: 2;
           order: 2;
   }
 
  #main > nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 5pt;
   background: #ccccff;
   -webkit-flex: 1 6 15%;
           flex: 1 6 15%;
   -webkit-order: 1;
           order: 1;
   }
 
  #main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 5pt;
   background: #ccccff;
   -webkit-flex: 1 6 15%;
           flex: 1 6 15%;
   -webkit-order: 3;
           order: 3;
   }
 
  header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 5pt;
   background: #ffeebb;
   }
 
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
 
   #main, #page {
    -webkit-flex-flow: column;
            flex-flow: column;
            flex-direction: column;
   }
   #main > article, #main > nav, #main > aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
 
   #main > nav, #main > aside, header, footer {
    min-height: 50px;
    max-height: 50px;
   }
  }
 </style>
  </head>
  <body>
 <header><h2>header1</h2></header>
 <div id='main'>
    <article>article</article>
    <nav>nav</nav>
    <aside>aside</aside>
 </div>
 <footer>footer</footer>
  </body>
</html>

Post a Reply

Replies

Oldest  Newest  Rating
+1 Franz Schmidt · July 27, 2014
#main > article:
It means that every "article" which is directly inside a tag with the id "main" gets affected.
0 Eddie Davis · July 27, 2014
Makes sense thanks.
  • 1

HTML / CSS / Web Design

107,134 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators