Tue, 2015-07-14 14:38
is :nth-child redundant and is :nth-of-type much better , definitive and maintanable after all ?
just wanted to know from you guys , which one of the 2 do you guys use ?
Tue, 2015-07-14 20:22
#1
No
They fulfill completely different purposes. One counts off the children of a parent element, The other counts off the elements of a specific type.
Trivial example:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ body { background-color: white; color: black; font: 100%/1.25 sans-serif; margin: 0; padding: 1.25em; } p { font-size: 1em; } #ex1 p:nth-of-type(2) { color: red; } #ex2 > p:nth-child(2) { color: red; } /*]]>*/ </style> </head> <body> <div id="ex1"> <h2> This is an example of :nth-of-type(2) </h2> <p> p1 </p> <p> p2 </p> </div> <div id="ex2"> <h2> This is an example of :nth-child(2) </h2> <p> p1 </p> <p> p2 </p> </div> </body> </html>
cheers,
gary
Wed, 2015-07-15 16:56
#2
still feel that
ur right , its just that since nth-of-type selector is more specific and in most cases you see that people misunderstand nth-child() for nth-of-type , also i see very few use cases for nth-child .
Wed, 2015-07-15 17:10
#3
Change the html
Modify the example like so:
<div id="ex1"> <h2> This is an example of :nth-of-type(2) </h2> <p> p1 </p> <blockquote> <p>embedded p</p> <p> another embedded p</p> </blockquote> <p> p2 </p> </div> <div id="ex2"> <h2> This is an example of :nth-child(2) </h2> <p> p1 </p> <blockquote> <p>embedded p</p> <p> another embedded p</p> </blockquote> <p> p2 </p> </div>
That someone does not understand the differences does not suggest using the inappropriate pseudo-class.
cheers,
gary