Although you can use the first-child and last-child selectors to select the first and last element in a list, the first-of-type and last-of-type pretty much does the same. The difference is that the first-of-type will only select the element if it’s the first element in the list of many others.
Using first-of-type in Tailwind CSS
You can use the first-of-type modifier class on a list of elements. The modifier will only apply styles if it’s the first element of it’s type in the list. Here is an example of using first-of-type in TailwindCSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<p class="first-of-type:text-2xl"> This is the first element in the list of 10 elements </p> <p class="first-of-type:text-2xl"> This is NOT the first element in the list of 10 elements </p> <p class="first-of-type:text-2xl"> This is NOT the first element in the list of 10 elements </p> <p class="first-of-type:text-2xl"> This is NOT the first element in the list of 10 elements </p> <p class="first-of-type:text-2xl"> This is NOT the first element in the list of 10 elements </p> <p class="first-of-type:text-2xl"> This is NOT the first element in the list of 10 elements </p> <p class="first-of-type:text-2xl"> This is NOT the first element in the list of 10 elements </p> <p class="first-of-type:text-2xl"> This is NOT the first element in the list of 10 elements </p> <p class="first-of-type:text-2xl"> This is NOT the first element in the list of 10 elements </p> <p class="first-of-type:text-2xl"> This is NOT the first element in the list of 10 elements </p> |
Here is the working code example and the output is shown below.
Using last-of-type in Tailwind CSS
Same as the first-of-type you can use the last-of-type which does the same thing but to the last element in the list. Here is a simple example of last-type-of in TailwindCSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<p class="last-of-type:text-2xl"> This is the first element in the list of 10 elements </p> <p class="last-of-type:text-2xl"> This is NOT the first element in the list of 10 elements </p> <p class="last-of-type:text-2xl"> This is NOT the first element in the list of 10 elements </p> <p class="last-of-type:text-2xl"> This is NOT the first element in the list of 10 elements </p> <p class="last-of-type:text-2xl"> This is NOT the first element in the list of 10 elements </p> <p class="last-of-type:text-2xl"> This is NOT the first element in the list of 10 elements </p> <p class="last-of-type:text-2xl"> This is NOT the first element in the list of 10 elements </p> <p class="last-of-type:text-2xl"> This is NOT the first element in the list of 10 elements </p> <p class="last-of-type:text-2xl"> This is NOT the first element in the list of 10 elements </p> <p class="last-of-type:text-2xl"> This is the last element in the list of 10 elements </p> |
Conclusion
The first-of-child and last-of-child does the same thing as first-child selector and last-child selector but in a different way. You can use first-of-child and last-of-child in TailwindCSS to only apply styles on the first or the last element of its type in a list of elements. Please read more about first-of-type on Tailwind documentation.