Exploring the Reasons Behind CSS Selectors
Many people have discussed various reasons in the comments section. However, if you're looking for non-table or list related reasons, then read on.
The Main Point
When using these selectors, your main focus is on the arrangement of sibling elements within the HTML structure for accurate selection. This explains why they are commonly utilized for tables and lists, where tr, td, and li elements are always siblings placed accordingly. Additionally, these selectors help determine whether to be inclusive or exclusive of certain types of elements (which explains the distinction between :nth-child and :nth-of-type). It's crucial to understand that these pseudo-classes do not count by some .className, instead they count based on the html element type - such as <div>, <li>, <span>, etc. These selectors are beneficial when modifications can't be made to the HTML structure or when consistency in selecting elements is desired.
Various Scenarios
The possibilities for utilizing these selectors are endless, making it difficult to predict all potential use cases.
For instance:, if you wish to style the second-to-last element within a div, regardless of its type (especially when the HTML is dynamically generated), your sole option would be to utilize :nth-last-child(2).
Or consider this example:, suppose you want to target the third h3 element within a div. Although you can adjust styles but not the HTML itself (meaning no class or id identifiers available), knowing that this particular h3 is consistently the third one of its kind in the HTML structure allows you to target it with h3:nth-of-type(3).
While there are countless other possible scenarios, focusing on the principles outlined in the "Main Point" section will shed light on the rationale behind their usage.