ЦСС селектори образац и детаљи

. Цхессхеет ЦСС селектори

Недавно сам ронио у ЦСС селекторе.

Постоји толико ЦСС селектора са непознатим симболима,>. , * + ~ [] итд., па су ме често збунили како функционишу ЦСС селектори. На крају сам их поравнао у глави и обликовао их како разумем.

* У ствари, хтео бих да их организујем на једној страници величине А4 да сачувам папире и спасим Земљу, али нисам могао, јер постоји толико много селектора које сам желео да додам, па сам морао да пређем више од једне странице . Све су то странице А4, осим насловних страна.

Испишите овај варалица и залепите га на зид. Не запамтите их, само завирите. Надам се да ће вам ова инфографика брзо пронаћи одговарајуће ЦСС селекторе и штеди вам време.

ЦСС цхеатсхеетЦСС игра селектора Риан Иу

Идите да преузмете ЦСС образац за одабир и уживајте у игри🕹

Без бриге. Све је бесплатно.

Завирите у ЦСС селектор.

Навешћу инфографику заједно са МДН дефиницијама како бих вам олакшао ствари.

Селектор типа

Селектор типа ЦСС одговара елементима према називу чвора. Другим речима, он бира све елементе дате врсте у документу. - МДН

Селектор типа

Селектор ИД-а

Бира елемент на основу вредности атрибута ид. У документу треба да постоји само један елемент са датим ИД-ом. - МДН

Селектор ИД-а

Селектор потомака

Било који елемент који одговара Б који је потомак елемента који одговара А (то је дете или дете детета итд.). комбинатор је један или више размака или двоструко већи од знакова. - МДН

Селектор потомака

Комбинујте изборнике десцендант & ИД

Комбинујте изборнике десцендант & ИД

Селектор класе

Селектор ЦСС класе одговара елементима на основу садржаја атрибута њихове класе. - МДН

Селектор класе

Комбинујте Селектор класе

Комбинујте Селектор класе

Цомма Цомбинатор

Било који елемент који одговара А и / или Б. - МДН

Цомма Цомбинатор

Универзални селектор

Само одаберите све!

Универзални селектор

Комбинујте универзални селектор

Комбинујте универзални селектор

Суседни брачни брат

Суседни комбинатор (+) раздваја два селектора и одговара другом елементу само ако одмах следи први елемент, а оба су деца истог родитељског елемента. - МДН

Суседни брачни брат

Генерал Селецтор Селецтор

Општи комбинатор браће (~) раздваја два бирача и одговара другом елементу само ако следи први елемент (иако не нужно одмах) и оба су деца истог родитељског елемента. - МДН

Генерал Селецтор Селецтор

Дечји селектор

Дечији комбинатор (>) налази се између два ЦСС селектора. Одговара само оним елементима које слаже други селектор који су деца елемената који се подударају са првим. - МДН

Дечји селектор

Псеудо селектор првог детета

ЦСС псеудо-класа првог детета представља први елемент у групи елемената рођака. - МДН

Псеудо селектор првог детета

Само дечији псеудо-селектор

ЦСС псеудо-класа: онли-цхилд представља елемент без браће и сестара. То је исто као: прво дете: последње дете или: нтх-дете (1): нтх-ласт-дете (1), али са нижим специфичностима. - МДН

Само дечији псеудо-селектор

Последњи псеудо селектор

ЦСС псеудо-класа последњег детета представља последњи елемент у групи брачних елемената. - МДН

Последњи псеудо селектор

Нтх Цхилд Псеудо селектор

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

Нтх Цхилд Псеудо селектор

Нтх Ласт Цхилд Селецтор

ЦСС псеудо-класа: нтх-ласт-цхилд () одговара елементима на основу њиховог положаја међу групама и сестара, рачунајући од краја. - МДН

Нтх Ласт Цхилд Селецтор

Прво од селектора типа

ЦСС псеудо-класе првог типа представља први елемент свог типа међу групом родбинских елемената. - МДН

Прво од селектора типа

Нтх оф Селецтор Типе-а

ЦСС псеудо-класа (нтх-оф-типе () одговара елементима датог типа на основу њиховог положаја међу групом родјака. - МДН

Нтх оф Селецтор Типе-а

Селектор четвртог типа са формулом

Селектор четвртог типа
 Напомена:
: нтх-оф-типе (чак)
: нтх-оф-типе (непарно)
: нтх-оф-типе (2)
: нтх-оф-типе (2н)
: нтх-оф-типе (3н-1)
: нтх-оф-типе (2н + 2)

Само за избор типа

ЦСС псеудо-класа: само типа типа представља елемент који нема браће и сестре истог типа. - МДН

Само за избор типа

Ласт оф Типе Селецтор

ЦСС псеудо-класе последњег типа представља последњи елемент свог типа међу групом брачних елемената. - МДН

Ласт оф Типе Селецтор

Празан селектор

: Празна ЦСС псеудо-класа представља било који елемент који нема децу. Деца могу бити или чворови елемената или текст (укључујући размаке). Коментари, упутства за обраду и ЦСС садржај не утичу на то да ли се елемент сматра празним. - МДН

Празан селектор

Негација псеудо-класе

ЦСС псеудо-класа: (не) ЦСС представља елементе који се не подударају са списком селектора. Пошто спречава да се одаберу одређене ставке, позната је као негативна псеудо-класа. - МДН

Негација псеудо-класе

Селектор атрибута

Бирачи атрибута су посебна врста селектора који ће одговарати елементима на основу њихових атрибута и вриједности атрибута. Њихова генеричка синтакса састоји се од углатих заграда ([]) који садрже назив атрибута, након чега слиједи опционални услов који одговара величини атрибута. Селектори атрибута могу се подијелити у двије категорије овисно о начину на који се подударају с вриједностима атрибута: Бирачи атрибута присутности и вриједности и Бирачи атрибута вриједности Субстринга. - МДН

Селектор атрибута

Селектор вредности атрибута

Селектор вредности атрибута

Атрибути започињу селектором

Овај селектор ће одабрати све елементе са атрибутом аттр за које вредност почиње са вал. - МДН

Атрибути започињу селектором

Атрибут завршава селектором

Овај селектор ће одабрати све елементе са атрибутом аттр за које се вредност завршава с вал. - МДН

Атрибут завршава селектором

Атрибут Селектор селектора

Овај селектор ће изабрати све елементе са атрибутом аттр за које вредност садржи субстринг вал. (Подстринг је једноставно део низа, нпр. "Цат" је подстринг у низу "гусјеница".) - МДН

Атрибут Селектор селектора

Честитамо, завршили сте

Чланци

🕹 ЦодеПен

Било каква питања или повратне информације

Волио бих чути ваше коментаре о томе како вам могу побољшати. Молим вас оставите своје коментаре испод или преко мог Твитера.

Велико хвала Риан Иу што ми је помогао да направим ЦСС селекторску игру. Риан Иу је аутор <ФронтЕнд30 /> где сам научио многе цоол фронт-енд технике.

Срећан кодни знак данас