css-quiz-not-and-nth-child-pseudo-classes.md

👋🏼 Welcome 👋🏼

Instagram | Twitter | LinkedIn

Choose your language 👅

• English
• Spanish

English version 🚀

Considering the following code (HTML and CSS), What would you see in the browser: A, B or C ?

Details

Click here to see the correct answer and explanation 👀

Correct Answer

Explanation

C

The :not(X) property in CSS is a negation pseudo class and accepts a simple selector as an argument (essentially, just another selector of any kind like nth-child(X) in this case). What the :nth-child(2n + 1) does, is select every odd span element (That is, the 1st and 3th. Think of n as starting at zero and then a set of all positive integers. Then complete the expression: (2 x 0) + 1 = 1 = 1st element and (2 x 1) + 1 = 3 = 3th element). Finally, the : not (X) pseudo class will tell us that it will apply the properties to the elements that are NOT odd (that is, the 2nd and 4rd).

Explicación basada en 👉🏼 :not() · CSS Tricks & How nth-child Works · CSS Tricks

Code:

HTML:

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

body {
  margin-top: 25px;
  font-family: 'Poppins', sans-serif;
}

span {
  background-color: plum;
  border-radius: 8px;
  padding: 12px 18px;
}

span:not(:nth-child(2n + 1)) {
  background-color: aquamarine;
}

Spanish version 🚀

Considerando el siguiente código (HTML y CSS), ¿Qué verías en el navegador: A, B o C?

Details

Haz click aquí para ver la respuesta correcta y su explicación 👀

Respuesta correcta

Explicación

C

:not(X) es una pseudoclase de negación y acepta un selector simple como argumento (esencialmente, solo otro selector de cualquier tipo como :nth-child(X) en este caso). Lo que hace la pseudo clase :nth-child(2n + 1) es seleccionar cada elemento span que sea impar (Es decir, el 1ro y el 3ro. Piensa en n como una variable que empieza en 0 y va recorriendo todos los números enteros dependiendo de la cantidad de elementos span que hayan en el HTML. Luego de eso, reemplázalo en la expresión: (2 x 0) + 1 = 1 = 1er elemento y (2 x 1) + 1 = 3 = 3er elemento). Finalmente, la pseudo clase :not(X) nos indicará que aplicará las propiedades a los elementos que NO sean impares (es decir, el 2do y el 4ro).

Explicación basada en 👉🏼 :not() · CSS Tricks & How nth-child Works · CSS Tricks

Código completo:

HTML:

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

body {
  margin-top: 25px;
  font-family: 'Poppins', sans-serif;
}

span {
  background-color: plum;
  border-radius: 8px;
  padding: 12px 18px;
}

span:not(:nth-child(2n + 1)) {
  background-color: aquamarine;
}

Hola @har0ld-scl !!! Muchísimas gracias a tiii, tienes toda la razón !!! Ya quedó corregido 💕😊

Hello @teffcode! De nada 👏🏻 🙌🏻 . Genial ahora ya quedó 🥳 🥳

Pregunta para ayudarme a mejorar como persona 🤚
Hice ese mismo comentario en Twitter y me bloqueaste. ¿Se ve agresivo mi comment? Solo quería ayudar, o aprender si yo estaba en lo incorrecto.

C. 2n+ 1 es la serie de los numer��os� �impares para todos n natural, si negamos todos los numeros impares nos quedan los numeros pares, osea el 2 y el 4. 💚