Menu
I am a bit confused about the nth-of-type pseudo class, and how this is supposed to work - especially as compared to the nth-child class.
Maybe I have the wrong idea, but given this structure
<div class="row"> <div class="icon">A</div> <div class="icon">B</div> <div class="label">1</div> <div class="label">2</div> <div class="label">3</div> </div> ..the third child element (first with class label) should (perhaps?) be selectable with
.row .label:nth-of-type(1) { /* some rules */ } However, at least in chrome here, it doesn't select it. It only appears to work if it is the first child in the row, which is the same as nth-child - therefore, what is the difference between this and nth-of-type?
677
The nth-of-type is very similar to the nth-child pseudo-class. The main difference is that it specifically considers the type of the element getting selected before checking any other logic. Let's use our example from above but apply nth-of-type instead.
The :nth-of-type(n) selector matches every element that is the nth child, of the same type (tag name), of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-child() selector to select the element that is the nth child, regardless of type, of its parent.
You can however apply CSS to an element based on :nth-of-type location and a class, as shown in the example above.
The :first-child: The :first-child selector is used to select those elements which are the first-child elements. For :first-child selector the <! DOCTYPE> must be declared for IE8 and earlier versions. The :first-of-type: The :first-of-type Selector is used to targeting the first child of every element of it's parent.
The nth-child pseudo-class refers to the "Nth matched child element", meaning if you have a structure as follows:
<div> <h1>Hello</h1> <p>Paragraph</p> <p>Target</p> </div> Then p:nth-child(2) will select the second child which is also a p (namely, the p with "Paragraph").p:nth-of-type will select the second matched p element, (namely, our Target p).
Here's a great article on the subject by Chris Coyier @ CSS-Tricks.com
The reason yours breaks is because type refers to the type of element (namely, div), but the first div doesn't match the rules you mentioned (.row .label), therefore the rule doesn't apply.
The reason is, CSS is parsed right to left, which means the the browser first looks on the :nth-of-type(1), determines it searches for an element of type div, which is also the first of its type, that matches the .row element, and the first, .icon element. Then it reads that the element should have the .label class, which matches nothing of the above.
If you want to select the first label element, you'll either need to wrap all of the labels in their own container, or simply use nth-of-type(3) (assuming there will always be 2 icons).
Another option, would (sadly) be to use... wait for it... jQuery:
$(function () { $('.row .label:first') .css({ backgroundColor:"blue" }); }); 
in the picture out of added 10 elements, 8 are <p> and 2 are <i>, the two shaded part elements are indicating <i> remaining eight are <p>
the css for the page goes here:
<style> * { padding: 0; margin:0; } section p { width: 20px; height: 20px; border:solid 1px black; border-radius: 15px; margin:20px; float: left; } section i { width: 20px; height: 20px; border:solid 1px black; border-radius: 15px; margin:20px; float: left; } section p:nth-child(1) { background-color: green; /*first-child of p in the flow*/ } section i:nth-child(1) { background-color: red; /*[first-child of i in the flow]NO */ } section i:nth-of-type(1) { background-color: blue; /*the type i of first child in the flow*/ } </style> </head> <body> <section> <p></p> <p></p> <p></p> <p></p> <i></i> <p></p> <i></i> <p></p> <p></p> <p></p> </section> </body> the first green bulb indicates
section p:nth-child(1) { background-color: green; /*first-child of p in the flow*/ } and second red bulb in the code does not work because i is not first elements in the flow
section i:nth-child(1) { background-color: red; /*[first-child of i in the flow]NO */ } and the blue bulb in the picture indicates the first type of i in the flow
section i:nth-of-type(1) { background-color: blue; /*the type i of first child in the flow*/ } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
