Разумевање ЦСС :нтх-цхилд() селектора

Као и сви ЦСС селектори, можете користити :нтх-цхилд() да идентификујете елементе на веб страници и примените стилове на њих. Али овај селектор вам омогућава да сузите скуп браће и сестара на основу њиховог релативног положаја.

Селектор подржава неке основне кључне речи за уобичајене случајеве, али такође пружа моћну синтаксу за подударање шаблона. Користећи га, можете одабрати елементе на основу редовних, понављајућих образаца или сложенијих дефиниција, на основу ваших потреба.

Синтакса селектора :нтх-цхилд().

Као ЦСС селектор псеудокласа, синтакса :нтх-цхилд() се разликује од осталих селектора. Узима аргумент као образац за подударање елемената у скупу браће и сестара:

:nth-child(args) {
/*...*/
}

Главни фокус је на аргументима у заградама. Ови аргументи дефинишу подскуп елемената за одабир.

Коришћење вредности кључних речи за уобичајене случајеве

Овај бирач може да прихвати две вредности кључних речи: одд и Чак. Посебно су корисни за стилизовање алтернативних редова у табели.

Једноставна уређена листа је још један добар пример када можете да користите ове вредности кључних речи:

<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>

Помоћу :нтх-цхилд (непарно) селектор, можете променити боју сваке алтернативне ставке:

:nth-child(odd) {
color: red;
}

Ставке почињу са индексом 1, тако да ће прва ставка бити црвена, затим трећа, и тако даље:

Функционална нотација за већу флексибилност

Можете да користите један цео број да изаберете појединачни елемент, овако:

li:nth-child(4) {
color: red;
}

У овом случају, селектор одговара само четвртој ставци на листи:

Ова синтакса је посебан случај опште функционалне синтаксе која бира ставке које одговарају датом шаблону. Ова синтакса је:

:nth-child(An+B) {
/*...*/
}

У овој нотацији, А је величина корака. То значи колико пута се бирач помера да би изабрао следећу ставку. Омогућава вам да изаберете сваку другу ставку, сваку трећу ставку итд. Б је почетна тачка на којој почиње селекција.

На пример, узмите аргумент 3н+1:

li:nth-child(3n+1) {
color: red;
}

Ово ће започети селекцију од прве ставке и наставити са сваком трећом ставком након тога:

Упоредите ово са изразом 3н+2:

li:nth-child(3n+2) {
color:red;
}

Ово и даље бира сваку трећу ставку, али сада почиње од друге ставке на листи:

Још један занимљив пример је :нтх-цхилд (н+3):

li:nth-child(n+3) {
color: red;
}

Овај ће изабрати сваку ставку (н), почевши од треће (+3). То ће изгледати овако:

Такође можете користити одузимање да бисте постигли одређене резултате:

li:nth-child(3n-1) {
color: red;
}

Овај пример и даље бира сваку трећу ставку, али почиње од „прво минус“. У ствари, то значи да ће изабрати другу ставку на листи, затим пету, и тако даље:

Од Синтакса

Такође можете користити кључну реч оф следи а селектор као аргумент у селектору :нтх-цхилд(). Ова синтакса вам омогућава да сузите могуће ставке из којих бира регуларни образац.

На пример, замислите да је ваша ознака компликованија од оригинала:

<ol>
<liclass="old">Item 1li>
<liclass="new">Item 2li>
<liclass="new">Item 3li>
<liclass="old">Item 4li>
<liclass="new">Item 5li>
<liclass="new">Item 6li>
<liclass="new">Item 7li>
ol>

Сада користите :нтх-цхилд да изаберете парне ставке из скупа оних са одређеном класом:

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

Обратите пажњу како су само парне подебљане ставке црвене:

Такође размотрите како се ово разликује од ли.нев: нтх-цхилд (пар) који циља на .нове елементе, али само ако су парни. То би биле ставке 2 и 6 у горњем примеру.

Рад са селектором :нтх-цхилд().

Можете постићи јединствен дизајн користећи селектор :нтх-цхилд(). Можете да креирате разнобојне веб странице и истакнете редове и колоне у табелама података. Комбиновање са другим ЦСС селекторима ће вам помоћи да креирате сложене изгледе и дизајне.