: Nth-child (index/even/odd/equation) matches the nth child or parity element ': eq (index)' under the parent element to only match one element, this will match the child element for each parent element. : Nth-child starts from 1, while: eq () is counted from 0!
You can use:
Nth-child (even)
: Nth-child (odd)
: Nth-child (3n)
: Nth-child (2)
: Nth-child (3n + 1)
: Nth-child (3n + 2)
Matches the nth-child of its parent. while ': eq (index)' matches only a single element, this matches more then one: One for each parent. the specified index is one-indexed, in contrast to: eq () which starst at zero. return Value
Array <Element>
Parameters
Index(Number): the sequence Number of the element to be matched, starting from 1
Example
Search for 2nd li addresses in each ul
HTML code:
<Ul>
<Li> John </li>
<Li> Karl </li>
<Li> Brandon </li>
</Ul>
<Ul>
<Li> Glen </li>
<Li> Tane </li>
<Li> Ralph </li>
</Ul>
JQuery code:
$ ("Ul li: nth-child (2 )")
Result:
[<Li> Karl </li>, <li> Tane </li>]
--------------------------------------------------------------------------------
: First-child matches the first child element ': first' only matches one element, and this selector matches one child element for each parent element. Matches the first child of its parent. While ': first' matches only a single element, this matches more then one: One for each parent. Return Value
Array <Element>
Example
Find the first li in each ul
HTML code:
<Ul>
<Li> John </li>
<Li> Karl </li>
<Li> Brandon </li>
</Ul>
<Ul>
<Li> Glen </li>
<Li> Tane </li>
<Li> Ralph </li>
</Ul>
JQuery code:
$ ("Ul li: first-child ")
Result:
[<Li> John </li>, <li> Glen </li>]
--------------------------------------------------------------------------------
: Last-child matches the last child element ': la' and only matches one element. This selector matches one child element for each parent element. Matches the last child of its parent. While ': last' matches only a single element, this matches more then one: One for each parent. Return Value
Array <Element>
Example
Find the last li in each ul
HTML code:
<Ul>
<Li> John </li>
<Li> Karl </li>
<Li> Brandon </li>
</Ul>
<Ul>
<Li> Glen </li>
<Li> Tane </li>
<Li> Ralph </li>
</Ul>
JQuery code:
$ ("Ul li: last-child ")
Result:
[<Li> Brandon </li>, <li> Ralph </li>]
--------------------------------------------------------------------------------
: Only-child: if an element is the only child element in the parent element, it will be matched. If the parent element contains other elements, it will not be matched. Matches the only child of its parent. If the parent has other child elements, nothing is matched. Return Value
Array <Element>
Example
In ul, find the li that is the only sub-element.
HTML code:
<Ul>
<Li> John </li>
<Li> Karl </li>
<Li> Brandon </li>
</Ul>
<Ul>
<Li> Glen </li>
JQuery code:
$ ("Ul li: only-child ")
Result:
[<Li> Glen </li>]
--------------------------------------------------------------------------------
: Input matches all input, textarea, select, And button elements. Matches all input, textarea, select and button elements. Return Value
Array <Element>
Example
Search for all input Elements
HTML code:
<Form>
<Input type = "text"/>
<Input type = "checkbox"/>
<Input type = "radio"/>
<Input type = "image"/>
<Input type = "file"/>
<Input type = "submit"/>
<Input type = "reset"/>
<Input type = "password"/>
<Input type = "button"/>
<Select> <option/> </select>
<Textarea> </textarea>
<Button> </button>
</Form>
JQuery code:
$ (": Input ")
Result:
[<Input type = "text"/>, <input type = "checkbox"/>, <input type = "radio"/>, <input type = "image"/>, <input type = "file"/>, <input type = "submit"/>, <input type = "reset"/>, <input type = "password"/>, <input type = "button"/>]
--------------------------------------------------------------------------------
: Text matches all single-line text boxes Matches all input elements of type text. Return Value
Array <Element>
Example
Search all text boxes
HTML code:
<Form>
<Input type = "text"/>
<Input type = "checkbox"/>
<Input type = "radio"/>
<Input type = "image"/>
<Input type = "file"/>
<Input type = "submit"/>
<Input type = "reset"/>
<Input type = "password"/>
<Input type = "button"/>
<Select> <option/> </select>
<Textarea> </textarea>
<Button> </button>
</Form>
JQuery code:
$ (": Text ")
Result:
[<Input type = "text"/>]
--------------------------------------------------------------------------------
: Password Match All password boxes Matches all input elements of type password. Return Value
Array <Element>
Example
Search all password boxes
HTML code:
<Form>
<Input type = "text"/>
<Input type = "checkbox"/>
<Input type = "radio"/>
<Input type = "image"/>
<Input type = "file"/>
<Input type = "submit"/>
<Input type = "reset"/>
<Input type = "password"/>
<Input type = "button"/>
<Select> <option/> </select>
<Textarea> </textarea>
<Button> </button>
</Form>
JQuery code:
$ (": Password ")
Result:
[<Input type = "password"/>]
--------------------------------------------------------------------------------
: Radio matches all radio buttons Matches all input elements of type radio. Return Value
Array <Element>
Example
Find all radio buttons
HTML code:
<Form>
<Input type = "text"/>
<Input type = "checkbox"/>
<Input type = "radio"/>
<Input type = "image"/>
<Input type = "file"/>
<Input type = "submit"/>
<Input type = "reset"/>
<Input type = "password"/>
<Input type = "button"/>
<Select> <option/> </select>
<Textarea> </textarea>
<Button> </button>
</Form>
JQuery code:
$ (": Radio ")
Result:
[<Input type = "radio"/>]
--------------------------------------------------------------------------------
: Submit match all submit buttons Matches all input elements of type submit. Return Value
Array <Element>
Example
Find all submit button
HTML code:
<Form>
<Input type = "text"/>
<Input type = "checkbox"/>
<Input type = "radio"/>
<Input type = "image"/>
<Input type = "file"/>
<Input type = "submit"/>
<Input type = "reset"/>
<Input type = "password"/>
<Input type = "button"/>
<Select> <option/> </select>
<Textarea> </textarea>
<Button> </button>
</Form>
JQuery code:
$ (": Submit ")
Result:
[<Input type = "submit"/>]
Others share the same principle: image,: reset,: button,: file,: hidden! @#@! % $ %
