Erabili: nth-of-type (n) Taulen bidez
Mahaiak errazago irakurtzeko, sarritan errenkadak lagungarriak izaten dira atzeko planoko koloreen artean. Estilo-taulen modu ohikoenetako bat beste errenkada atzeko planoaren kolorea ezartzea da. Hau da, sarritan, zebra-marrak.
Horretarako, beste errenkada bat CSS klase batekin ezarrita dago eta klase horretarako estiloa definitzen du. Honek funtzionatzen du, baina ez da horri buruz hoberena edo eraginkorrena.
Metodo hau erabiltzean, mahai bakoitzean editatu behar duzun bakoitzean mahai bakoitzean errenkada guztiak editatu ahal izango dituzu errenkada bakoitza aldaketak direla eta. Adibidez, taulako errenkada bat txertatzen baduzu, beheko beste errenkada guztiek klaseak aldatu beharko dituzte.
CSSek zebra-marrak dituzten estilo-taulak erraz egiten ditu. Ez duzu HTML atributu gehigarririk edo CSS klase gehiagorik gehitu behar, hau da: nth-of-type (n) CSS hautatzailea .
The: nth-of-type (n) selector CSS-en egiturazko pseudo-klase bat da, gurasoen eta anai-arreben arteko harremanetan oinarritutako elementu estiloak. Erabili dezakezu iturburu ordenan oinarritutako elementu bat edo gehiago hautatzeko. Beste era batera esanda, guraso mota jakin baten ume baten nondik norakoa den.
Letra n hitz gakoa izan daiteke (bakoitiak edo areak), zenbaki bat edo formula bat.
Esate baterako, estiloaren beste paragrafo-etiketa atzeko plano koloreko hondoarekin, zure CSS dokumentua honako hau izango litzateke:
p: nth-of-type (bakoitiak) {
atzeko planoa: horia;
}
Hasi zure HTML taulan
Lehenik eta behin, sortu taula taula normalean HTML gisa idazteko. Ez gehitu klase berezirik errenkadetan edo zutabeetan.
Zure estilo-orrian, gehitu CSS hauek:
tr: nth-of-type (bakoitiak) {
background-color: #ccc;
}
Honek errenkada beste errenkada bat izango du, atzeko plano gris batekin, lehenengo errenkadan hasita.
Estiloak modu berean aldatzen diren zutabeak
Estiloa mota bera egin dezakezu tauletan zutabeetan. Horretarako, aldatu tr zure CSS klasean td-ra. Adibidez:
td: nth-of-type (bakoitiak) {
background-color: #ccc;
}
Formulak erabiliz n-motako (n) hautatzailean
Hautagailuan erabilitako formula baten sintaxia an + b da.
Zikloa edo indizea tamaina adierazten duen zenbaki bat da.
n "letra" letra da benetan eta kontagailua 0 da.
+ "-" operadore bat ere bada,
b osoko zenbaki bat da eta desplazamendu-balioa adierazten du, adibidez, zenbat errenkada beherantz egin behar duen hautatzailea atzeko planoko kolorea aplikatuz. Beharrezkoa da operadoreak formulan sartuta badago.
Adibidez, hiru errenkada bakoitzeko atzeko planoko kolorea ezarri nahi baduzu, zure formula 3n + 0 izango litzateke. Zure CSS hau izan liteke:
tr: nth-of-type (3n + 0) {
atzeko planoa: slategray;
}
Nth-of-type Selector erabiltzeko tresnak erabilgarriak
Pseudo-klase nth-of-type selektibearen bidez alderdiaren alderdiaren itxura apur bat sentitzen baduzu, saiatu: nth Tester gune sintaxia zehazteko nahi duzun itxura lortzeko lagunduko duen tresna erabilgarri gisa. Erabili goitibeherako menua nth-of-type hautatzeko (beste pseudo-klase batzuekin ere probatu dezakezu, adibidez, nth-child).