Foydalanishda: nth-of-kind (n) Jadvallar bilan
Jadvallarni oson o'qish uchun jadvallarni o'zgartiradigan satrlarni tartibga solish juda foydali bo'ladi. Uslublar jadvallarining eng keng tarqalgan usullaridan biri har bir qatorning fon rangini belgilashdir. Bu ko'pincha "zebra chiziqlar" deb nomlanadi.
Buni amalga oshirishingiz mumkin, bu har bir satrni CSS sinf bilan belgilash va keyin u sinf uchun uslubni belgilashdir. Bu ishlaydi, lekin bu haqda borishning eng yaxshi yoki eng samarali usuli emas.
Ushbu usuldan foydalanganda har jadvalni tahrirlashingiz kerak bo'lgan har bir satr jadvaldagi har bir qatorni o'zgartirish kerak bo'lishi mumkin. Masalan, jadvalga yangi satr qo'shsangiz, quyida joylashgan har bir satr sinfni o'zgartirishi kerak.
CSS zebra chiziqlaridagi stillarni osonlikcha tuzatishga yordam beradi. Hech qanday qo'shimcha HTML- attributlarni yoki CSS-ni qo'shib qo'yishingiz shart emas. Siz faqatgina nth-of-kind (n) CSS tanlash vositasidan foydalanasiz .
N-tipdagi (n) tanlovi CSS-ning tarkibiy psevdo-klassi bo'lib, ular elementlarni ota-onalar va qarindosh-urug'lar bilan o'zaro munosabatlarga asoslantiradigan elementlardan iboratdir. Siz ularni manba buyurtma asosida bir yoki bir nechta elementni tanlash uchun ishlatishingiz mumkin. Boshqacha aytganda, u ota-onaning muayyan turidagi n-uchinchi elementga mos kelishi mumkin.
N harfi kalit so'z (odat yoki hatto), raqam yoki formulalar bo'lishi mumkin.
Misol uchun, har bir paragraf tagini sariq rangli rang bilan tarjima qilish uchun CSS hujjati quyidagilarni o'z ichiga oladi:
p: nth-of-kind (odd) {
fon: sariq rangli;
}
HTML jadvalidan boshlang
Birinchidan, odatdagidek HTML-da yozing, jadvalingizni yarating. Satrlarga yoki ustunlarga maxsus sinflarni qo'shmang.
Sizning uslublar jadvalida quyidagi CSS-ni qo'shing:
tr: nth-of-kind (bitta) {
fon-rang: #ccc;
}
Bu birinchi satr bilan boshlangan kulrang fon rangi bilan har bir qatorni taratadi.
Shu bilan bir qatorda uslublar o'zgaruvchan ustunlar
Sizning jadvallaringizdagi ustunlarga o'xshash uslubni qo'llashingiz mumkin. Buni amalga oshirish uchun faqatgina CSS-ni sinab ko'ring. Masalan:
td: nth-of-kind (bitta) {
fon-rang: #ccc;
}
Formulalarni n-tipdagi (n) selektorda ishlatish
Selektorda ishlatiladigan formulalar sintaksisi + b.
a sikl yoki indeks kattaligini ifodalovchi raqam.
n aslida "n" harfi va 0 ga teng bo'lgan taymerni ifodalaydi.
+ operator bo'lishi mumkin, bu ham "-" bo'lishi mumkin.
b butun sonni ifodalaydi va ofset qiymatini ifodalaydi, masalan, selektor fon rangini qo'llashni boshlashi kerak bo'lgan qancha qator pastga. Agar operator operatorga kiritilgan bo'lsa, bu talab qilinadi.
Misol uchun, har uchinchi qatorda fon rangi o'rnatmoqchi bo'lsangiz, sizning formulaingiz 3n + 0 bo'ladi. Sizning CSS shunday bo'lishi mumkin:
tr: nth-of-kind (3n + 0) {
fon: sirtmoq;
}
N-tipidagi selektorni ishlatish uchun foydali vositalar
Agar siz psdu-sinfli nth-of-selektorni ishlatishning formulasi tomonidan biroz jim tursangiz, nth Tester saytini kerakli ko'rinishga erishish uchun sintaksisini aniqlashda yordam beradigan foydali vosita qilib ko'ring. Nth-of-ni tanlash uchun ochiladigan menyudan foydalaning (bu erda nth-child kabi boshqa pseudo-sinflar bilan ham tajriba qilishingiz mumkin).