Welcome Guest! (App Version 3.1)

websitnero logo name

Child and Nth Type Selectors

Selectors based on Child Values

These selectors select an element by counting its position among all children of a particular parent element. First-child, last-child, or child of nth number can be easily calculated with simple formulas. These selectors are of great help in making some uncommon selection like an element, 7th of its type at current dom (document object model) level of tree.

Child & Nth-Type Selectors
S.No.NameRepresentationDescriptionExamples
1First child:first-childSelects the first child of an element
2First of type:first-of-typeSelects the first child of an element but of a certain type
3Last Child:last-childSelects the last child of an element
4Last of type:last-of-typeSelects the last child of an element but of a certain type
5Nth Child:nth-child()Selects the nth child of an element (as mentioned inside brackets)
6Nth of type:nth-of-type()Does same work as nth-child except that the selection applies only on a certain type of element
7Nth last child:nth-last-child()Selects nth number of child of an element, but counting starts from the end (rather than from beginning)
8Nth last of type:nth-last-of-type()Does same work as nth-last-child except that selection applies only on a certain type of element
9Only Child:only-childSelects child of an element, if it is the only child (and no other child is present for an element)
10Only of a type:only-of-typeDoes the same work as only-child except that it applies to only one type of element (if 'p' tag is applied as only-of-type, then there may be more div, span, or other elements as children, but paragraph should be only one -- to be selected).
WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.