You are currently viewing CSS nth-Child() Selector

CSS nth-Child() Selector

A styling language called Cascading Style Sheets (CSS) is used to add styling to our web content so that it is visually appealing and user-friendly. The:nth-child() selector is a CSS property that is flexible and more powerful and is used for precisely targeting particular items within a parent container.

Introduction

The CSS3 specification includes the nth-child selector, To identify which components should be addressed, it receives a formula. The equation has the form an + b, where n is the element’s location, a is a multiplier, and b is an offset. Every element in the parent is subject to the formula’s evaluation; if it produces a positive integer, the element is chosen, and the corresponding styles are applied.

For example, consider the following HTML structure:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

If we want to select and style every even-numbered element, we can use the nth-child selector like this:

li:nth-child(2n) {
  background-color: pink;
}

In this case, 2n select all the even <li> elements and applies the background color as “pink”.

CSS nth-Child() Selector

Application of nth -child Selector

Web developers have a wide range of options when using the nth-child selector to create visually appealing and responsive designs. Here below are the examples:

  • Navigation Menu: We can use the nth-child selector to style individual items in navigation menus differently. For example, we might want to highlight the current page by giving its corresponding menu item a different background color.
li:nth-child(3) {
  background-color: #ff9900;
  color: white;
}
CSS nth-Child() Selector
  • SlideShow Effect: With the nth-child selector, it is easy to produce slideshow effects with only CSS. In order to construct transitions, we can change the opacity of specific slides in of a container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slideshow Example</title>
<style>
  .slideshow-container {
    position: relative;
    max-width: 600px;
    margin: auto;
  }

  .slide {
    display: none;
    text-align: center;
  }

  .slide img {
    max-width: 100%;
    height: auto;
  }

  /* Show the first slide */
  .slide:first-child {
    display: block;
  }

  /* CSS animation */
  .slide {
    animation: fade 3s infinite;
  }

  @keyframes fade {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    75% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
</style>
</head>
<body>

<div class="slideshow-container">
  <div class="slide">
    <img src="slide1.jpg" alt="Slide 1">
  </div>
  <div class="slide">
    <img src="slide2.jpg" alt="Slide 2">
  </div>
  <div class="slide">
    <img src="slide3.jpg" alt="Slide 3">
  </div>
</div>

</body>
</html>

Let’s take a look at some of the examples.

Example 1: In this example, every even paragraph is selected. The formula used in 2n, i.e., 2, 4, 6 paragraphs, is selected. In this example, we have just created a simple HTML structure using the paragraph tag and then added internal CSS inside the HTML only using the <style> tag. Inside the style tag, we will use the tag selector ‘p’ to select the paragraph, using the nth-child selector and the 2n even formula to select the even paragraph, and we will set the background of the even paragraph to blue and the font color to white.

<!DOCTYPE html>
<html>

<head>
	<title>CSS :nth-child Selector</title>
	<style>
		p:nth-child(2n) {
			background: blue;
			color: white;
		}
	</style>
</head>

<body style="text-align:center">
	<h1 style="color:Red;">
		CodeWithRandom
	</h1>
	<h2>
		CSS :nth-child Selector
	</h2>

	<p>
		A frontend website to master frontend development
	</p>

	<p>
		Become a pro frontend developer
	</p>

</body>

</html>
CSS nth-Child() Selector

Example 2: In this example we will select the odd list item from the table and add some styling to it using the nth -child selector.We will select every odd list item using (2n+1) formula . We will select 1,3,5 list item from the table.

<!DOCTYPE html>
<html>

<head>
	<title>CSS :nth-child Selector</title>
	<style>
		li {
			width: 30%;
		}

		li:nth-child(odd) {
			background: blue;
			color: white;
		}
	</style>
</head>

<body style="text-align:center">
	<h2>
		CSS :nth-child Selector
	</h2>
	<p>Web Developer Skills</p>
	<ul>
		<li>HTML.</li>
		<li>CSS.</li>
		<li>Javascript.</li>
		<li>Bootstrap.</li>
	</ul>
</body>

</html>
CSS nth-Child() Selector

Limitation of nth-child () Selector

  1. Browser Compatibility: Although generally supported, some older browsers may not fully accept the more complicated formulas.
  2. Zero-Based Indexing: The nth-child selector uses a 1-based index, meaning the first element is considered the 1st child. This can be confusing when working with programming-like indexing.

Summary:

Using the nth-child selector in CSS, developers can target and style items according to where they are located within a parent element. Web developers may use the nth-child selector to design appealing and responsive web interfaces.

If you find out this Blog helpful, then make sure to search Codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Follow: CodewithRandom
Author: Arun



Leave a Reply