Instagram | Twitter | LinkedIn
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;
}
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;
}
@teffcode Entretenido quiz para iniciar el año!
Sólo un detalle en la explicación al final debiese ser:
No? lo mismo en español.
Gracias por compartir estas cosas con la comunidad un abrazo!