What does it mean and how to use the value (Number)n+(Number) in the Nth-Child() property?

Asked

Viewed 41 times

3

I’ve seen several examples using the property nth-child() with values such as a number to select a particular element or select even and odd elements with values even and odd, but I saw that you can select an element with this syntax as value in the property nth-child():

Syntax:

:nth-child((Number)n+(Number)) {
    property: value;
}

Example:

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:nth-child(2n+4) {
            background: black;
            color: white;
        }
    </style>
</head>
<body>
    <p>Esse é um parágrafo.</p>
    <p>Esse é um parágrafo.</p>
    <p>Esse é um parágrafo.</p>
    <p>Esse é um parágrafo.</p>
    <p>Esse é um parágrafo.</p>
    <p>Esse é um parágrafo.</p>
</body>
</html>

That figure made me very confused what that value means 2n+4? and how to use it?

html css

1 answer

0

An+B

Represents elements whose numerical position in a series of siblings corresponds to the standard An+B, which will be applied to any number greater than or equal to zero (i.e., starting from zero). The index of the first element is 1. Both A and B values must be (integers).

HTML

<h3><code>span:nth-child(2n+1)</code>, SEM um
<code>&lt;em&gt;</code> entre os elementos filhos.</h3>
<p>Os filhos 1, 3, 5 e 7 são selecionados.</p>
<div class="primeiro">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br>

<h3><code>span:nth-child(2n+1)</code>, COM um
   <code>&lt;em&gt;</code> entre os elementos filhos.</h3>
<p>Os filhos 1, 5 e 7 são selecionados.<br>
   O 3 está incluído na contagem por ser um filho, mas não é
   selecionado porque ele não é um <code>&lt;span&gt;</code>.</p>
<div class="segundo">
  <span>Span!</span>
  <span>Span</span>
  <em>Este é um `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br>

<h3><code>span:nth-of-type(2n+1)</code>, COM um
   <code>&lt;em&gt;</code> entre os elementos filhos.</h3>
<p>Os filhos 1, 4, 6 e 8 são selecionados.<br>
   O 3 não está incluso na contagem nem é selecionado porque ele é um <code>&lt;em&gt;</code>, 
   não um <code>&lt;span&gt;</code>, e <code>nth-of-type</code> seleciona apenas os
   filhos desse último tipo. O <code>&lt;em&gt;</code> é completamente
   pulado e ignorado.</p>
<div class="terceiro">
  <span>Span!</span>
  <span>Span</span>
  <em>Este é um `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>

CSS

html {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.primeiro span:nth-child(2n+1),
.segundo span:nth-child(2n+1),
.terceiro span:nth-of-type(2n+1) {
  background-color: lime;
}

source and result of the above code: https://developer.mozilla.org/en-US/docs/Web/CSS/:Nth-Child

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.