How to style using nth-of-type within a ul tag?


Tags: css,css-selectors

Problem :

How can I use the nth-of-type css selector on <span> elements that are contained within the <li> elements of a <ul>?

I would have expected span:nth-of-type(odd) and span:nth-of-type(even) to work but they did not.

The page in question is below:

<style>
  span:nth-of-type(even) {
    background-color: grey;
  }

  span:nth-of-type(odd) {
    background-color: blue;
  }
</style>
<ul>
    <li>
<span>Test 1</span>
    </li>
    <li>
<span> 2 Test</span>
    </li>
</ul>

<br>
Should look like this:
<br>
<span>Test 1</span>
<br>
<span> 2 Test</span>

Here is a JSFiddle to show the issue in action.



Solution :

You have to do it like this:

li:nth-of-type(odd) > span {}
li:nth-of-type(even) > span {}

The selector nth-of-type (and also first-child, last-child or nth-child) refer to their parents. In this case the parent is the <li>-tag. So both <span>s are odd elements as both are the first-child element. And both get selected the way you defined the CSS-rule. The CSS-rule here selects their parents as they can be alternating and sets the style for the children accordingly.


    CSS Howto..

    How to center my a div in a table using CSS?

    How to achieve a silk-screen effect (a dotted shadowy effect) on an image with javascript/jquery?

    How to change image css after rotating it in JS?

    How to style the entire first row of a table in css

    How to Slant/Skew only the bottom of the div

    In the ordered sequence of words: “Word1, Word2, Word3”: how to have 1 and only 1 hyperlink on “Word1” & “Word3”? Thus, skip a word in a single link?

    How to increase the width of my template? [closed]

    How to keep css content position when zooming in and out?

    how to put css max-left or min-left position to absolute object?

    how to scale img by percentage of self and not percentage of its container

    How to make a responsive mosaic css fullscreen width

    How to override CSS :hover?

    How to create a pop-up div on mouse over and stay when click

    How to maintain consistent text and image positioning using CSS

    How to make sidebar always visible in the Semantic UI

    How to have an unlimited amount of divs shown next to each other

    CSS: How to move contents of one div into another one

    How do I apply css animations to angular2 components before they are destroyed/removed?

    how to align bootstrap nav menu with another div?

    How to target images with dynamically generated ids with CSS

    How to achieve following style for horizontal rule with css

    How to set border between two products in css?

    How to change 1 out of a menu/model thing with css instead of a whole model/menu?

    How to control a

    How to add css style in php email?

    How can I convert this from jQuery to vanilla JS?

    How do I find out if a CSS class exists in a StyleSheet? [duplicate]

    How to make CSS image transition smooth?

    How do I (by default) style different types of labels differently?

    How to get every line of text / elements of a page centered horizontally?