General Sibling Selector

The general sibling selector selects elements that follow another specified element, but not necessarily immediately.

The general sibling Selector has the following syntax:

 
<first selector> ~ <second selector>
  
 
        <!DOCTYPE HTML> 
        <html> 
            <head> 
                <title>Example</title> 
                <style type="text/css"> 
                p ~ a { 
                    border: thin black solid; 
                    padding: 4px; 
                } 
                </style> 
            </head> 
            <body> 
                <a href="http://java2s.com">Visit the java2s.com</a> 
                <p>HTML</p> 
                <a href="http://google.org">google.com</a> 
                <a href="http://cnn.com">CNN</a> 
            </body> 
        </html>
  
Click to view the demo
Home 
  HTML CSS Book 
    CSS  

Selectors Combination:
  1. Selector Unions
  2. Selecting Descendant Elements
  3. Selecting Child Elements
  4. Immediate Sibling Selector
  5. General Sibling Selector
Related: