Next »
1908/1956
« Previous

Filtering by Relationships

Relationship selector list

The position selectors are:

SelectorDescription
:first-childSelects all elements that are the fi rst child of their parent.
:last-childSelects all elements that are the last child of their parent.
:nth-child()Selects all elements that are the nth-child of their parent.
:only-childSelects all elements that are the only child of their parent.

nth-child filter starts at 1

The following code demonstrates the use of filter selectors that match according to specific relationships, for example :first-child or :only-child.


<!DOCTYPE html> 
<html>
    <head>
        <script src="http://java2s.com/style/jquery-1.8.0.min.js"> 
        </script>
        <script> 
            $(function(){ <!--from w w w.  ja va2 s . co  m-->
                document.writeln( $("div span:first-child") ) 
                document.writeln( $("div span:last-child") ) 
                document.writeln( $("div span:only-child") ) 
                document.writeln( $("div span:nth-child(2)") ) 
                document.writeln( $("div span:nth-child(2n+1)") ) 
                document.writeln( $("div span:nth-child(even)") ) 
            });
        </script> 
    </head> 
    <body>
        <div> 
            <span id="a">A</span> 
            <span id="b">B</span> 
            <span id="css">CSS</span> 
            <span id="HTML">HTML</span> 
            <span id="javascript">Javascript</span>
        </div>
        <div> 
            <span id="c">C</span> 
            <span id="CSS3">CSS3</span> 
            <span id="HTML5">HTML5</span> 
            <span id="jQuery">jQuery</span> 
            <span id="UI">UI</span>
        </div> 
        <div> 
            <span id="Java">java2s.co m</span> 
        </div> 
    </body> 
</html>

Click to view the demo

The code above generates the following result.

Filtering by Relationships
Next »
« Previous