How to select the third li element in css3-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to select the third li element in css3

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 16, 2021 pm 01:15 PM

css

In CSS, you can use the ":nth-child(n)" selector to select the third li element. The function of this selector is to select the nth child element under the parent element. When the selector When the number in is 3, the third element will be selected, and the syntax is "li:nth-child(3){css style code;}".

How to select the third li element in css3

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

How to select the third li element in css3

In css, if you want to select the third li element, you need to use " :nth-child(n)" selector.

:nth-child(n) selector matches the Nth child element that belongs to its parent element, regardless of the element's type.

n can be a number, keyword or formula.

The example is as follows:

<html>
<head>
<style> 
li:nth-child(3)
{
background:#ff0000;
}
</style>
</head>
<body>
<ul>
  <li>雪碧</li>
  <li>可乐</li>
  <li>凉茶</li>
  <li>咖啡</li>
</ul>
</body>
</html>

Output result:

How to select the third li element in css3

(Learning video sharing: css video tutorial)

The above is the detailed content of How to select the third li element in css3. 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

'CSS4' UpdateApr 11, 2025 pm 12:05 PM

Since I first chimed in on the CSS4¹ thing, there's been tons of more discussion on it. I'm going to round up my favorite thoughts from others here. There is

The Three Types of CodeApr 11, 2025 pm 12:02 PM

Every time I start a new project, I organize the code I’m looking at into three types, or categories if you like. And I think these types can be applied to

HTTPS is Easy!Apr 11, 2025 am 11:51 AM

I've been guilty of publicly bemoaning the complexity of HTTPS. In the past, I've purchased SSL certificates from third-party vendors and had trouble

HTML Data Attributes GuideApr 11, 2025 am 11:50 AM

Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.

Understanding Immutability in JavaScriptApr 11, 2025 am 11:47 AM

If you haven’t worked with immutability in JavaScript before, you might find it easy to confuse it with assigning a variable to a new value, or reassignment.

Custom Styling Form Inputs With Modern CSS FeaturesApr 11, 2025 am 11:45 AM

It’s entirely possible to build custom checkboxes, radio buttons, and toggle switches these days, while staying semantic and accessible. We don’t even need a