CSS: Select element only if a later sibling exists - HTML CSS CSS Selector

HTML CSS examples for CSS Selector:element parent child

  1. HOME
  2. HTML CSS
  3. CSS Selector
  4. element parent child

Description

CSS: Select element only if a later sibling exists

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
main {<!--from w  ww . j a va 2s.com-->
   padding:6%;
   border:4px dashed Chartreuse;
}

main>aside {
   float:right;
   width:21%;
   background:silver;
}

main>section {
   width:100%;
   background:green;
}

main>aside + section {
   width:71%;
   margin-right:31%;
   background:blue;
}
</style> 
 </head> 
 <body> 
  <main> 
   <aside>
     Lorem ipsum d 
   </aside> 
   <section>
     Lorem ipsum dol 
    <br>Lorem 
    <br>Lorem 
   </section> 
  </main> 
  <br> 
  <br> 
  <br> 
  <main> 
   <section>
     Lorem ipsum dolor si 
   </section> 
  </main>  
 </body>
</html>

Related Tutorials