Selecting multiple adjacent siblings and their children - 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

Selecting multiple adjacent siblings and their children

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">
div {<!--   w  w  w.  ja  v a2s.c o m-->
   height:31px;
   width:81px;
   margin:11px 0;
   border:2px solid Chartreuse;
}

#magic:hover + #sibling1 span,
#magic:hover + #sibling1 + #sibling2 span {
   color:yellow;
}
</style> 
 </head> 
 <body> 
  <div id="magic">
    Lorem i 
  </div> 
  <div id="sibling1"> 
   <span>Lorem ips</span> 
  </div> 
  <div id="sibling2"> 
   <span>Lorem ips</span> 
  </div>  
 </body>
</html>

Related Tutorials