Home >Web Front-end >HTML Tutorial >How to select even columns of li in html

How to select even columns of li in html

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-23 18:07:273685browse

You can use the ":nth-of-type()" selector to select the even columns of li in html, and the syntax is "li:nth-of-type(even){}". The ":nth-of-type(n)" selector matches child elements of a specific type of the parent element. When the value is even, it means matching elements with an even number.

How to select even columns of li in html

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

You can use li:nth-of-type(even) {......} to select the even columns of li

Example:

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      #Ulist li:nth-of-type(even) {
        background: royalblue;
      }
    </style>
  </head>
  <body>
    <ul id="Ulist">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </body>
</html>

Effect:

How to select even columns of li in html

Recommended learning: html video tutorial

The above is the detailed content of How to select even columns of li in html. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn