Пайдалану: nth-of-type (n) кестелермен
Кестелерді оңайырақ оқып шығу үшін, айнымалы өң түстері бар жолдарды стильдеу пайдалы. Стиль кестелерінің ең кең таралған жолдарының бірі - кез-келген басқа қатардың өң түсі. Бұл көбінесе «зебра жолақтары» деп аталады.
Мұны CSS сыныбымен бірге әр жолды белгілеп, сол сынып үшін мәнерді анықтау арқылы орындауға болады. Бұл жұмыс істейді, бірақ бұл туралы ең жақсы немесе тиімді тәсілі.
Бұл әдісті пайдаланған кезде, әр кестені өзгерту қажет болған сайын әр жолды өзгерістермен сәйкестігін қамтамасыз ету үшін әр кестені өңдеу қажет болуы мүмкін. Мысалы, егер кестеңізге жаңа жол салсаңыз, оның төменгі кез келген жолында сынып өзгертілуі керек.
CSS кестелерді зебр жолақтарымен жеңілдетеді. Қосымша HTML атрибуттарын немесе CSS сыныптарын қосудың қажеті жоқ, сіз жай ғана: nth-of-type (n) CSS селекторын қолданасыз.
Nth-of-type (n) селекторы CSS-да құрылымдық жалған-сынып болып табылады, ол элементтерді ата-ана мен туысқандық элементтерге қатынастар негізінде қалыптастыруға мүмкіндік береді. Оларды біреуден немесе бірнешеуін бастапқы дереккөз негізінде таңдауға болады. Басқаша айтқанда, ол ата-анасының белгілі бір түрінің n-ші баласы болып табылатын әрбір элементке сәйкес келуі мүмкін.
Н әрпі кілт сөз болуы мүмкін (мысалы, тақ немесе тіпті), сан немесе формула.
Мысалы, әрбір басқа параграфты сары өң түсімен стильдеу үшін CSS құжатыңыз мыналарды қамтиды:
p: nth-of-type (тақ) {
фон: сары;
}
HTML кестеңнен бастаңыз
Алдымен кестеңізді жасаңыз, әдетте оны HTML-да жазасыз. Жолдарға немесе бағандарға ешқандай арнайы сабақ қоспаңыз.
Стиль кестесінде келесі CSS қосыңыз:
tr: nth-of-type (бір) {
background-color: #ccc;
}
Бұл бірінші жолдан бастап сұр фон түстері бар кез-келген жолды көрсететін болады.
Бірдей жолдағы бағандарды айналдыру бағандары
Кестелердегі бағандарға бірдей түрдегі сәндеуді жасай аласыз. Мұны істеу үшін, CSS сыныбындағы tr параметрін жай-күйіне өзгертіңіз. Мысалға:
td: nth-of-type (біркелкі) {
background-color: #ccc;
}
N-типті (n) селекторлық формулаларды пайдалану
Селекторға қолданылатын формуланың синтаксисі + b болып табылады.
a цикл немесе индекс өлшемін білдіретін сан.
n - іс жүзінде «n» әрпі болып саналады, ол жұлдыздарда 0.
+ оператор болып табылады, ол сонымен бірге «-»
b бүтін сан болып табылады және ол ығысудың мәнін білдіреді, мысалы, селектор фон түсі қолданыла бастағанда қанша жол төмен. Бұл оператор оператор формулаға қосылған жағдайда қажет.
Мысалы, әр 3-ші жолға өң түсі орнатқыңыз келсе, формула 3n + 0 болады. Сіздің CSS келесідей болуы мүмкін:
tr: nth-of-type (3n + 0) {
фон: саңылау;
}
Nth-of-choice селекторын қолданудың пайдалы құралдары
Егер сіз псевдоксиня түріндегі селектордың псевдоксинін қолданудың формуласы бойынша аздап сезінсеңіз, nth Tester сайтын қалаған көрініске қол жеткізу үшін синтаксисті анықтауға көмектесетін пайдалы құрал ретінде көріңіз. Nth-of-type-ді таңдау үшін ашылмалы мәзірді пайдаланыңыз (nth-child тәрізді басқа да псевдо-сыныптармен тәжірибе жасай аласыз).