Home-theater-designers
Com tots els selectors CSS, podeu utilitzar :nth-child() per identificar elements d'una pàgina web i aplicar-hi estils. Però aquest selector us permet restringir un conjunt de germans en funció de la seva posició relativa.
MUO Vídeo del dia DESPLACEU PER CONTINUAR AMB EL CONTINGUT
El selector admet algunes paraules clau bàsiques per a casos habituals, però també proporciona una potent sintaxi de concordança de patrons. Utilitzant-lo, podeu seleccionar elements basats en patrons regulars repetits o definicions més complexes, segons les vostres necessitats.
La sintaxi del selector :nth-child().
Com un Selector de pseudo-classe CSS , la sintaxi :nth-child() és diferent d'altres selectors. Pren un argument com a patró per fer coincidir elements en un conjunt de germans:
:nth-child(args) {
/*...*/
}
El focus principal està en els arguments entre parèntesis. Aquests arguments defineixen el subconjunt d'elements a seleccionar.
Ús de valors de paraula clau per a casos habituals
Aquest selector pot acollir dos valors de paraula clau: estrany i fins i tot . Són especialment útils per a estil de files alternatives en una taula .
Una llista ordenada senzilla és un altre bon exemple de quan podeu utilitzar aquests valors de paraula clau:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ol>
Utilitzant el :nth-child (senar) selector, podeu canviar el color de cada element alternatiu:
:nth-child(odd) {
color: red;
}
Els elements comencen a l'índex 1, de manera que el primer element apareixerà en vermell, després el tercer, i així successivament:
Notació funcional per a més flexibilitat
Podeu utilitzar un sol enter per seleccionar un element individual, com aquest:
li:nth-child(4) {
color: red;
}
En aquest cas, el selector només coincideix amb el quart element de la llista:
Aquesta sintaxi és un cas especial de la sintaxi funcional més general que selecciona elements que coincideixen amb un patró determinat. Aquesta sintaxi és:
com fer que l’instal·lador usb de Windows 10
:nth-child(An+B) {
/*...*/
}
En aquesta notació, A és la mida del pas. Això significa el nombre de vegades que es mou el selector per seleccionar l'element següent. Et permet seleccionar tots els altres elements, cada tercer element, etc. B és el punt de partida on comença la selecció.
Per exemple, prenem l'argument 3n+1:
li:nth-child(3n+1) {
color: red;
}
Això iniciarà la selecció al primer element i continuarà amb cada tercer element després:
Compareu això amb l'expressió 3n+2:
li:nth-child(3n+2) {
color:red;
}
Això encara selecciona cada tercer element, però ara comença des del segon element de la llista:
Un altre exemple interessant és :nth-child(n+3):
li:nth-child(n+3) {
color: red;
}
Aquest seleccionarà tots els elements (n), començant pel tercer (+3). Es veurà així:
També podeu utilitzar la resta per aconseguir determinats resultats:
li:nth-child(3n-1) {
color: red;
}
Aquest exemple encara selecciona cada tercer element, però comença des del 'menys primer'. En efecte, això vol dir que seleccionarà el segon element de la llista, després el cinquè, i així successivament:
La sintaxi de
També podeu utilitzar la paraula clau de seguit d'a selector com a argument al selector :nth-child(). Aquesta sintaxi us permet reduir els possibles elements dels quals selecciona el patró normal.
Per exemple, imagineu-vos que el vostre marcatge és més complicat que l'original:
<ol>
<li class="old">Item 1</li>
<li class="new">Item 2</li>
<li class="new">Item 3</li>
<li class="old">Item 4</li>
<li class="new">Item 5</li>
<li class="new">Item 6</li>
<li class="new">Item 7</li>
</ol>
Ara, utilitzeu :nth-child per seleccionar els elements parells del conjunt dels que tenen una classe específica:
.new {
font-weight: bold;
}
li:nth-child(even of.new) {
color: red;
}
Observeu com només els elements en negreta parells són vermells:
Tingueu en compte també com es diferencia d'això li.new:nth-child(even) que s'orienta a .nous elements, però només si són parells. Aquests serien els elements 2 i 6 de l'exemple anterior.
què volen dir els emojis a l'iPhone?
Treballant amb el selector :nth-child().
Podeu aconseguir dissenys únics mitjançant el selector :nth-child(). Podeu crear llocs web acolorits i ressaltar files i columnes a les taules de dades. Combinar-lo amb altres selectors CSS us ajudarà a crear dissenys i dissenys complexos.