CSS väljare. typer av selektorer

, där var och en du vill ställa in en viss färg. Hur man gör det? Standard CSS väljare är inte lämpliga för tags, de anger parametrarna för alla block på en gång. Lösningen är enkel. Tilldela klassen. Till exempel den första fick div class = 'red', andra - class = 'blå', tredje - class = 'gröna'. Nu kan de väljas med CSS tabeller.

Syntaxen är som följer: Anger en punkt ( ""), följt av att skriva namnet på klassen. För att hantera den första enheten använder konstruktionen .Red. Andra - .Blå och så vidare.

Viktigt! Det rekommenderas att använda meningsfulla värden för klassen attribut. Det anses som dåligt att använda translitteration (t.ex. krasiviy-blok) eller slumpmässiga kombinationer av bokstäver / siffror (ojfh834871). I denna kod, är du skyldig att bli förvirrad, att inte tala om de svårigheter som kommer att möta de som kommer att vara engagerade i projektet efter dig. Det bästa alternativet - att använda metoden, såsom BEM.

Fördelar - relativt hög flexibilitet.

Nackdelar - de multipla element kan vara en och samma klass, vilket betyder att de kommer att redigeras samtidigt. Problemet är löst med hjälp av den metod samt arv av preprocessorer. Var noga med att få tag mindre sass eller någon annan preprocessor, de kraftigt förenkla arbetet.

ID väljare

Om denna version opinions kodare och programmerare är tvetydiga. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Vissa CSS tutorials inte rekommendera användning av ID, eftersom felaktig tillämpning de kan orsaka problem med arv. Men många experter är aktivt ordna dem hela layouten. Du bestämmer. # »), затем имя блока. Syntaxen är som följer: pundtecken ( "#"), sedan namnet på blocket. #red. Till exempel #red.

отличается от класса по нескольким параметрам. ID skiljer sig från klassen på flera sätt. ID. För det första kan sidan inte två identiska ID. De tilldelas ett unikt namn. För det andra har en sådan väljare en högre prioritet. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Detta innebär att om du anger en enhet klass rött och ange i CSS tabeller röd bakgrundsfärg, och sedan tilldela den samma id blå och ange färgen blå kommer enheten blir blå.

Fördelar - du kan styra den specifika element, ignorerar stilar av taggar och klasser.

ID и class. Nackdelar - lätt att gå vilse i ett stort antal ID och klass.

Viktigt! ID вам, в общем-то, не нужны. Om du använder BEM metodik (eller dess analoger), ID för dig i allmänhet inte behövs. Denna teknik innebär användning av layout unika klasser som mycket mer praktiskt.

universell väljare

{}. Syntax: Starlets tecken ( "*") och hängslen, det vill säga {*} ...

Används för att tilldela vissa egenskaper när alla delar av sidan. När detta kan vara användbart? box-sizing: border-box. Till exempel, om du vill ställa in sidegenskap box-dimensionering: border-box. div *{}. Kan inte bara användas för att hantera alla delar av dokumentet, men också för att styra alla barn i den angivna blocket, till exempel, div * {}.

Fördelar - du kan styra ett stort antal objekt åt gången.

Nackdelar - inte tillräckligt flexibelt alternativ. Dessutom användning av denna väljare, i vissa fall bromsa sidan arbetet.

av attribut

Gör det möjligt att styra element med en viss egenskap. Till exempel, du har ett antal ingångs taggar med en annan attributtypen. En av dem - text, den andra - lösenord, den tredje - numret. Naturligtvis kan du ställa varje klass eller ID, men det är inte alltid praktiskt. CSS-selektorer av attribut gör det möjligt att ange värden för vissa taggar med maximal precision. Till exempel så här:

input [typ = 'text'] {}

Denna väljare kommer att välja alla attribut med typen av ingångs text.

Verktyget är ganska flexibel och kan användas med någon av taggarna, där det kan finnas attribut. Men det är inte allt! CSS-specifikationen har förmågan att kontrollera elementen med ännu mer bekvämlighet!

Tänk dig att din sida har ingång med platshållare attributet = "Ange ett namn" och platshållare input = "Ange lösenord". De kan också väljas med väljaren! För att göra detta, använd följande struktur:

input [placeholder = "Ange namn"] {} eller input [platshållare = "Ange lösenordet"]

Kanske mer flexibelt arbete med attribut. Låt oss säga att du har ett antal taggar med liknande attribut titel (till exempel "Caspian" och "Caspian"). För att välja båda, använd följande val:

[Title * = "Kaspijsk"]

CSS kommer att välja alla objekt i titeln som det finns symboler för "Caspian", det vill säga. E. och "Caspian" och "Caspian".

Du kan också välja taggar som börjar med en viss karaktär attribut:

[Title ^ = "tecken som du vill"] {}

eller avsluta dem:

[Title $ = "right tecken"] {}.

Fördelar - maximal flexibilitet. Du kan välja befintliga sidelement utan jävlas med klasserna.

Nackdelar - används relativt sällan, endast i särskilda fall. Många webbdesigners föredrar att metodik, eftersom punkten klassen är lättare än att arrangera ett flertal hakparenteser och tecken "lika". Dessutom har dessa väljare inte i Internet Explorer version 7 och under. Men som nu behöver det gamla Internet Explorer?

pseudo-klassväljare

Betecknar en pseudo-statuselement. Till exempel ,: hover - vad som händer med den del av sidan när du håller ,: besökt - den besökta länken. Den innehåller också element såsom: första barn och: sista barn.

Denna typ av väljare aktivt används i modern layout, eftersom tack vare det kan du göra en sida "live" utan att använda JavaScript. Till exempel, du vill vara säker på att när du för muspekaren över knappen med klassen btn dess färg ändras. För att göra detta använder vi följande struktur:

.btn: hover {

background-color: red;

}

Beauty kan anges i de grundläggande egenskaperna hos knappen övergången egendom, till exempel, 0,5 s - i detta fall, på knappen kommer inte att rodna omedelbart, och inom en halv sekund.

Dygder - används i stor utsträckning för "revival" sidor. Lätt att använda.

Nackdelar - de är inte. Detta är en riktigt praktiskt verktyg. Däremot kan oerfarna webbdesigners gå vilse i överflödet av pseudo-klasser. Problemet är löst studier och praktik.

pseudo-väljare

"Pseudo" - det är de delar av sidan som inte är i HTML, men att de fortfarande kan hanteras. Du förstod inte? Det är mycket enklare än det verkar. Till exempel vill du göra den första bokstaven i strängen stor och röd, lämnar andra små och svart text. Naturligtvis kan man dra slutsatsen att brevet i ett spann med en viss klass, men det är lång och tråkig. Det är mycket lättare att markera hela stycket och använda pseudo :: första bokstäver. Det ger möjlighet att styra utseendet på den första bokstaven.

Det finns ett ganska stort antal pseudo-element. Lista dem i en enda artikel är osannolikt att lyckas. Du hittar relevant information på din favorit sökmotor.

Fördelar - ger flexibilitet att anpassa utseendet på sidan.

Nackdelar - nya för dem är ofta förvirrade. Många val av denna typ av arbete endast i vissa webbläsare.

För att sammanfatta

Selector - ett kraftfullt verktyg för styrning dokumentflöde. Tack vare honom, kan du välja varje enskild komponent på sidan (det endast delvis är ännu). Var noga med att lära sig alla de alternativ som finns, eller ens skriva ner dem. Detta är särskilt viktigt om du skapa komplexa sidor med en modern design och massor av interaktiva element.