Have you ever wanted to style just the third item in a list? Or apply alternating background colors to odd and even rows? In this guide, we’ll cover a set of handy CSS selectors that let you target elements based on their order, tag type, or class name. Each selector comes with a simple example so that even beginners can understand how and when to use them.

:nth-child() – Target a specific position

This selector targets the Nth child among siblings. It's useful when you want to highlight a specific item, like the third list element.

li:nth-child(3) {
  color: red;
}

:nth-child(odd), :nth-child(even) – Odd and even elements

These are ideal for creating zebra-striped lists or tables. They're commonly used to alternate row colors and improve readability.

li:nth-child(odd) {
  background: #f9f9f9;
}
li:nth-child(even) {
  background: #eee;
}

:nth-child(3n) – Every 3rd element

Use this to select elements that are multiples of 3. It's great for styling columns in a 3-column grid layout.

li:nth-child(3n) {
  font-weight: bold;
}

:nth-of-type() – Count specific tag types

This counts only elements of the same type. It's helpful when your list includes mixed HTML tags but you only want to style the Nth li.

li:nth-of-type(2) {
  color: blue;
}

:first-child / :last-child – First and last elements

Perfect for styling the first or last item in a list. Use this to remove extra spacing, add borders, or highlight edge cases.

li:first-child {
  margin-top: 0;
}
li:last-child {
  margin-bottom: 0;
}

:not(:first-child) – Everything except the first

This excludes the first element and applies styles to the rest. It’s useful when you want to add borders or spacing between items but skip the first one.

li:not(:first-child) {
  border-top: 1px solid #ccc;
}

:nth-last-child(X) – Xth from the end

Targets the element counting from the end. Great for styling bottom-positioned items like disclaimers or footnotes.

li:nth-last-child(5) {
  color: orange;
}

:nth-last-of-type(X) – Xth of a tag type from the end

Similar to :nth-last-child but only counts elements of the same tag. Use it to precisely style, for example, the fifth li from the end even if other tags are present.

li:nth-last-of-type(5) {
  background: #ffd;
}

:nth-child(n+X) – From X onward

This selects elements starting at position X and continuing to the end. It’s helpful for applying styles after a certain point, like post-ad content.

li:nth-child(n+5) {
  border: 1px solid #ccc;
}

:nth-of-type(n+X) – From X onward (same tag type)

Just like above, but limited to a specific tag type. Ideal for component lists where you want to fade or mute items after a threshold.

li:nth-of-type(n+5) {
  opacity: 0.8;
}

:nth-child(-n+X) – Up to the Xth

Selects all elements from the start up to position X. Use this to emphasize top-ranked items like popular articles or featured posts.

li:nth-child(-n+5) {
  font-style: italic;
}

:nth-of-type(-n+X) – Up to the Xth of a tag type

Same idea as above, but tag-specific. Useful for styling the top entries in category or tag lists.

li:nth-of-type(-n+5) {
  font-weight: bold;
}

:nth-last-child(-n+X) – Last X items

Selects the last X elements in reverse. Great for styling the newest items in lists or logs.

li:nth-last-child(-n+5) {
  color: green;
}

:nth-last-of-type(-n+X) – Last X of same tag type

Counts backward within a tag type. Perfect when you want to highlight the most recent list items but ignore other element types.

li:nth-last-of-type(-n+5) {
  background: #f0f0ff;
}

:nth-last-child(n+X) – Everything before the last X

Targets elements before the Xth-from-last. Helps when styling older items differently from recent ones.

li:nth-last-child(n+5) {
  text-decoration: underline;
}

:nth-last-of-type(n+X) – Earlier items of same tag type

Same as above, scoped to a single tag. Good for styling older items in chronological lists without affecting other tags.

li:nth-last-of-type(n+5) {
  background: #fff0f0;
}

Attribute selectors (^=, $=, *=) – Starts with, ends with, contains

These let you match part of an attribute value. They're useful for targeting class names that follow naming conventions.

[class^="btn-"] {
  padding: 1em;
}
[class$="-danger"] {
  color: red;
}
[class*="icon"] {
  display: inline-block;
}

Summary

CSS selectors give you fine-grained control over styling based on position, tag type, or attributes. From zebra-striped rows to highlighting specific list items, mastering these selectors helps you write more flexible and maintainable code.