Поглед у ЦСС3 први избор структурних елемената
Једна ствар коју волим код ЦСС3 је нови додатак селектора који нам омогућава да циљамо елементе посебно без ослањања на класа, ид или други атрибут елемента, а онај који ћемо покрити овде је следећи селектор, : први тип.
Тхе : први тип селектор ће циљати прво дијете наведеног елемента, на примјер, исјечак испод ће циљати први х2 на веб страници.
х2: / * стилска декларација првог типа / *
Тхе : први тип такође је једнако : нтх-оф-типе \ т, умјесто да одабирете само први овог типа, можемо даље одабрати другу, трећу и тако даље. Следећи исјечак ће циљати на други х2 на веб страници.
х2: нтх-оф-типе (2) / * декларација стила * /
: први тип” вс. “:прво дете”
Можда изгледа да ова два селектора раде исту ствар, али то није случај. Да видимо следећу демонстрацију:
Рецимо да имамо пет елемената пасуса у оквиру див, овако:
Праграпх 1
Праграпх 2
Праграпх 3
Праграпх 4
Праграпх 5
Сада, желимо да изаберемо први пасус користећи :прво дете селектор.
п: фирст-цхилд паддинг: 5пк 10пк; бордер-радиус: 2пк; позадина: # 8960а7; цолор: #ффф; бордер: 1пк солид # 5б456а;
И као што смо очекивали, први параграф је успешно изабран.
- : Демо за прво дете
Међутим, када ми додајте други елемент раније први параграф, рецимо х1, као исечак испод:
Наслов 1
Праграпх 1
Праграпх 2
Праграпх 3
Праграпх 4
Праграпх 5
први пасус неће бити изабран, као прво дете унутар див је више није параграф, али сада је х1.
Дакле, ово је ситуација у којој : први тип селектор долази да реши проблем.
п: први-од-типа паддинг: 5пк 10пк; бордер-радиус: 2пк; позадина: # а8б700; цолор: #ффф; бордер: 1пк солид # 597500;
- : Демо од првог типа
Тхе “Ласт” Селецтор
Где је “први”, онда ће такође бити “последњи”.
Реверзни од два селектора о којима смо већ говорили су следећа два селектора; тхе : последње дете анд тхе : ласт-оф-типе. Они су у основи исти као и претходна два, осим што циљају последње дете наведеног елемента.
На пример, овај исечак испод ће циљати последњи пасус унутар див.
п: ласт-цхилд паддинг: 5пк 10пк; бордер-радиус: 2пк; позадина: # 8960а7; цолор: #ффф; бордер: 1пк солид # 5б456а;
- : последње дете дете
И овај исечак ће такође циљати последњи пасус у истој ситуацији као што смо горе поменули; овог пута директно следи други елемент.
п: ласт-оф-типе паддинг: 5пк 10пк; бордер-радиус: 2пк; позадина: # а8б700; цолор: #ффф; бордер: 1пк солид # 597500;
- : Демо последњег типа
Селецтивизр
Као и свака друга нова особина у ЦСС3, ови селектори нису подржани у старим претраживачима, углавном Интернет Екплорер 6 до 8, са изузетком за :прво дете селектор, као што је додато од ЦСС2.1. Његова релативна : последње дете додата је само у ЦСС3.
Дакле, ако су сви ови селектори које смо овде поменули заиста потребни за ваш вебит, можете користити ЈаваСцрипт библиотеку под називом Селецтивизр да емулира функционалност ЦСС3 селектора.
Селецтивизр зависи од других ЈаваСцрипт библиотека да би радио, као што су јКуери, Дојо, Прототипе и МооТоолс; и гледајући из табеле поређења на званичном сајту, чини се да је МооТоолс способан да обрађује све селекторе.
Дакле, укључимо га заједно са Селецтивизром, као што следи:
Горе наведени условни коментар осигурава да се те библиотеке учитавају само у прегледнику Интернет Екплорер 8 и ниже.
Коначно, можете погледати демо са следећих линкова и сада би требало да ради иу модерним и старим претраживачима (ИЕ8 и ниже). Такођер можете преузети изворну датотеку за даљње испитивање. Уживати.
- Демо
- Довнлоад Соурце
