Detta material ägnas åt grunderna för styling på en internetresurs med hjälp av väljare.

Väljare i CSS används för att definiera en specifik
element i html-sidan som du behöver ansöka om
eller ändra CSS-stilen.

Typer av väljare i CSS

Elementväljare

För att ge den nödvändiga CSS-stilen skrivs i detta fall namnet som en väljare html-element. Till exempel räcker det att ange önskad stil för H1-rubriken, varefter dessa rubriker kommer att ha den form vi kräver. Så här kommer koden att se ut:

H1 (
teckenstorlek: 11pt;
}

Det finns ofta tillfällen då du behöver göra rubriker in olika stilar. Här kommer en klassväljare att hjälpa till att lösa detta problem.

Väljare efter klass

Klassväljaren är universell i CSS. Du kan skriva det så här: före klassnamnet skriver vi en prick, och först då inom parentes anger vi stilen vi behöver:

.red (
teckensnittsfamilj: tahoma, sans-serif;
färgen röd;
teckenstorlek: 11pt;
}

Ett exempel på användning av en klassväljare. Låt oss tillämpa den här stilen på H1-rubriken html sida:

Namn på sidan

Från exemplet ovan kan du se att "class"-attributet med det angivna namnet tillämpas CSS-stil "röd".
Ett annat exempel. I html-delen skriver vi:

Denna rubrik är blå eftersom motsvarande klass tillämpas på den

id".

I html-dokumentet ser det ut så här:

Låt oss ställa in stilen för detta stycke

I CSS-dokumentet:

p#newstyle (färg: blå; teckenstorlek: 12px;)

Som ett resultat kommer ett blått teckensnitt med en storlek på 12px att användas för detta stycke.

Kontextväljare

En lika nödvändig komponent är kontextväljare.
Till exempel på en webbplats fanns det ett behov av "H1"-rubriker, bifogade med taggen djärv markera i rött:

H1 fet (färg:röd;)

Som du kan se skrivs H1-rubriken först, ett mellanslag läggs till och taggen djärv och sedan inom parentes stilen vi angav. Detta kan uttryckas i ord som detta: "Om det finns en fet tagg inuti H1-huvudet ska texten vara röd."

På detta sätt kan du också ställa in stilar för objekt i punktlistor, tabeller och till och med deras celler, med olika kapslingsnivåer.

Nästa sida -

CSS-väljare är en av huvudfunktionerna i CSS-språket. Väljare låter dig komma åt antingen en grupp av element eller bara ett av dem.

Väljare i CSS

Väljare används för att tala om för webbläsaren vilka element som ska tillämpas på stilarna som beskrivs i hängslen.

P (stilar...)

I det här fallet är väljaren p – stycketagg. Den här regeln lägger till stilar till alla stycken på en webbsida.

Vilka typer av CSS-väljare finns det?

Taggväljare - det enklaste. Det har visats i ett exempel. För att skriva det i css måste du skriva taggnamnet utan vinkelparenteser. Stilarna kommer att tillämpas på alla element med den taggen.
Table() – stilar för alla tabeller
Li() – stilar för alla listobjekt
A() – stilar för alla länkar

Stilklass– du kan bifoga en stilklass till valfritt element på en webbsida. Till och med till en bokstav. Sedan i css-filen kan du komma åt detta element genom att skriva dina egna stilar för det. För att göra detta måste du sätta en prick och skriva namnet på stilklassen efter den. Exempel:
.about() – reglerna kommer att gälla för alla element som har attributet class = "about".
.down() – reglerna kommer att tillämpas på alla element som har attributet class = "down".
.float() – reglerna kommer att gälla för alla element som har attributet class = "float"

Som du kan se är det viktigaste att göra en poäng. En stilklass kan bindas till ett obegränsat antal element. Ett element kan tilldelas flera klasser.

Identifierare– annan typ av väljare. En identifierare kan tilldelas endast ett element. Den kan inte ha två identifierare, och ID:t som är kopplat till detta element kan inte registreras någon annanstans.

Den är inställd så här:

Paragraf

Det vill säga, precis som en klass, används bara attributet id vilket ord som helst används som dess betydelse.

För att komma åt ett element med en identifierare via css måste du skriva id-värdet och sätta en hash framför det.

#first( Teckenstorlek: 22px)

Vi övergick till stycket med id = först. Stilen kommer bara att tillämpas på den. För de återstående styckena ändras inte teckenstorleken.

Pseudo-klasser

Det finns en intressant typ av väljare i CSS: pseudoklasser. Det vill säga klasser som element har som standard och som inte behöver specificeras ytterligare. Vissa av dem fungerar bara för länkar, medan vissa kan appliceras på alla element. I vilket fall som helst, CSS-pseudo-klasser underlättar avsevärt arbetet för en webbutvecklare.

En pseudoklass är en stilklass av ett element som vi faktiskt inte definierade själva, det existerar bara på egen hand. Till exempel, se den här koden i html:

Paragraf

Du kan absolut säga att det här stycket har en speciell klass, eftersom det är skrivet där. Men pseudoklasser behöver inte skrivas som standard, och detta är deras fördel i det här fallet. Låt oss sedan titta på de mest populära av dem.

För länkar

För inmatningsfält och länkar

:focus – Stilen tillämpas på elementet som får ingångsfokus.
Faktum är att det finns många nya coola pseudo-klasser för inmatningsfält, men de är alla nya för CSS3, och i den här artikeln skulle jag bara vilja diskutera de enklaste. Det kommer definitivt att finnas en artikel om CSS3-väljare i framtiden.

För alla element

1. :hover – stil som används när du håller muspekaren över ett element
2. :first-child – välj det första underordnade elementet
3. :last-child – sista underordnade element
4. :nth-child() – Ett tal eller en formel skrivs inom parentes som bestämmer vilka element som kommer att väljas.
5. :first-of-type, :last-of-type, :nth-of-type() – fungerar nästan identiskt med de tidigare pseudoklasserna. Den enda skillnaden är att elementtypen beaktas här. Skillnaden kan märkas i följande exempel:
   li:first-child – det första listobjektet kommer att väljas, men bara om li-elementet kommer först i det överordnade blocket. Om det finns en annan tagg före den kommer ingenting att väljas.
6. li:first-of-type – det första listobjektet från allt som finns i den överordnade kommer att väljas. Det spelar ingen roll var de finns i koden. Jag hoppas att skillnaden är tydlig.
7. :nth-last-child – fungerar på samma sätt som :nth-child, men räknas från det sista elementet, inte det första.
8. :nth-last-of-type – liknande :nth-last-child, men med hänsyn till elementtypen.

Dessa är inte alla pseudoklasser, utan de mest populära och nödvändiga. Egentligen är alla pseudoklasser markerade på samma sätt i css, åtskilda av ett kolon. Dessutom kan du kombinera väljare och få intressanta funktioner:
a:visited:active – stilar för den redan besökta länken som klickas på.
div:first-child:hover – stilar för alla de första blocken i deras föräldrar som hålls över.

Som du kan se ger sådana väljare stora möjligheter när det gäller stylingelement. Använd dem så kan du enkelt nå vilka element som helst.

Kombinera väljare

En annan viktig regel du behöver känna till. Stilklassväljare kan skrivas utan att separera dem från varandra. Till exempel:
.class1.class2 – kommer att välja de element som har båda dessa klasser.
.class1.class3.class8 – kommer att välja element som alla tre stilklasserna är kopplade till.

Kapslade väljare

Om vi ​​skiljer väljare från varandra med mellanslag kan vi nå det element vi behöver. Exempel:
Tabell td – markerar alla celler i tabeller
Ul li a – väljer alla länkar som finns i listobjekt (och listobjekt ligger i sin tur i själva listorna)
.class1 p – kommer att välja alla stycken med attributet class = "class1"
.class2 p span – kommer att välja allt tagginnehåll , som ligger i stycken med klass klass2.

Du kan häcka och kombinera på detta sätt hur många gånger du vill. Exempel:
#header .logo span:first-letter()– väljer den första bokstaven i logotypen, som finns i rubriken
.class1.class2:hover() – kommer att definiera hovringsstilen för element som har båda stilklasserna.

Barnväljare

Om du behöver styla överordnade element som är DIREKT dotterbolag, då måste du skriva det så här:
Ul > li() – kommer att välja listobjekt som är kapslade direkt i den, och inte i andra taggar
P > a() – väljer bara de länkar i stycken som ligger direkt i dem och inte kapslade i andra taggar (som i sin tur redan är kapslade i stycken)
Exempel:

Om du skriver en väljare som denna P > a , kommer stilarna att tillämpas på länken i exemplet ovan? Nej, eftersom det fortfarande är kapslat i en annan tagg, det vill säga det är inte ett direkt underordnat.

Intilliggande väljare

Det sista vi ska titta på idag. Om du skriver det i css så här:
.class1 + .class4() , då väljer denna väljare elementet med attributet class = "class4" , och detta element måste visas i HTML-koden omedelbart efter elementet med klassen class1. Bara i det här fallet kommer allt att fungera. Låt oss titta på ett exempel igen:

Kommer väljaren ovan (.class1 + .class4()) att fungera? Nej, eftersom elementen inte ligger bredvid varandra. Mellan dem finns img-taggen. Om du tar bort det kommer allt att fungera.

Så vi har tittat på de mest grundläggande och enklaste väljarna. Denna kunskap kommer säkert att räcka för att du ska lösa 95% av problemen. I nästa artikel kommer jag att beskriva några mer specifika CSS-väljare.

Attributväljare

Låter dig välja specifika element utan att tilldela dem en stilklass eller identifierare.

Attributväljare är de väljare där ett attribut eller ett attribut med ett värde skrivs inom hakparenteser. Några exempel för att klargöra det:
* – väljer alla element som har ett href-attribut med valfritt värde.
input – väljer alla inmatningselement som har ett disable-attribut (alla inaktiverade fält).
input – väljer alla fält vars typ är lösenord , det vill säga fält för att ange ett lösenord.
img – väljer en bild som har src-attributet = "/logo.png" specificerat.

Som du kan se är det inte så svårt att skriva CSS-attributväljare. Deras viktigaste skillnad är hakparenteserna, där antingen bara ett attribut eller ett attribut med dess exakta värde skrivs. Men funktionaliteten hos dessa väljare slutar inte där.

Avancerade css-attributväljare

Alla följande väljare är skiftlägeskänsliga.
Sök i början av en rad
div – väljer alla div som har en stilklass som börjar med "block". Således kommer till exempel följande block att väljas: "block-head", "block-3", "blocknote" . Huvudsaken är att det finns ett nyckelord i början av betydelsen.

Hitta i slutet av en sträng
A – väljer alla länkar vars adress slutar på .rar. Således, om du kan ladda ner något på din webbplats, kan du lägga till en ikon bredvid alla länkar till arkiverade filer.

Att hitta en delsträng överallt i ett värde
span – kommer att välja alla span-taggar som har "art" i sitt klassnamn var som helst i namnet. Således kommer till exempel spann med följande klasser att väljas: party, clart, art-1.

Sök efter prefix
p – kommer att välja stycken med en stilklass som har ett namn som antingen exakt matchar "först" eller som innehåller prefixet först- som börjar klassnamnet.

Att hitta ord inom mening
inmatning– kommer att välja alla inmatningselement där värdet för identifieringsattributet innehåller ordet text . Det skiljer sig från att söka efter en delsträng överallt genom att det är ordet som måste inkluderas, inte delsträngen.

De två sista alternativen används sällan och kommer sannolikt inte att vara användbara för dig ofta, men för allmän utveckling kan du fortfarande känna till dem.

Vad är attributväljare användbara för?

Med hjälp av sådana väljare kan du välja många HTML-element utan att ge dem stilklasser. I vissa fall kan du med den här metoden förkorta koden och förenkla ditt arbete. Till exempel ovan gav jag ett exempel med en ikon för arkiv. Här dök en annan idé upp. Till exempel, på din webbplats länkar du ofta till en annan resurs (säg Wikipedia) och du vill visa en speciell ikon bredvid länkar till Wikipedia, som andra länkar inte borde ha.

Du kan implementera det så här:

A (css-regler)

Det finns faktiskt många fler sätt att använda attributväljare. De kan till viss del förenkla arbetet där det behövs. Använd css och prenumerera på bloggen för att lära dig mer om webbutveckling.

Css3-väljare och pseudoklasser

Om nya css3-väljare, som jag inte skrev om i tidigare artiklar.

Förbättrat arbete med formulär

Det här är nya pseudoklasser. I grund och botten handlar de alla om nya formers möjligheter.
:enabled – pseudoklassen kommer att välja alla aktiva fält. Det vill säga de där du kan skriva något eller åtminstone är läsbara.
:disabled är den motsatta pseudoklassen, väljer alla inaktiverade fält. Följaktligen kan du med dess hjälp lägga till ytterligare stilar till sådana fält.
:skrivskyddad – välj alla inmatning, som är skrivskyddade.
:read-write – väljer alla fält som är redigerbara.

Lägga till stilar med giltighet i åtanke

Det finns också mycket intressanta pseudoklasser med vilka du kan tilldela stilar beroende på giltigheten eller ogiltigheten av det angivna värdet. Tidigare kunde detta endast göras med JavaScript.
:valid – väljer alla fält där det angivna värdet uppfyller kraven. Själva kraven specificeras vanligtvis med mönsterattributet. Kan också bero på fälttypen. Till exempel kommer ett fält som innehåller en e-postadress att betraktas som ogiltigt om det inte finns något @ i det angivna värdet.
:invalid – väljer därför alla ogiltiga fält där värdet inte motsvarar vad som förväntas. Till exempel kan du göra texten färg i fält som detta rött:

Indata:ogiltig( Färg: röd;)

Om vi ​​nu skriver felaktiga värden i fälten blir texten röd. Följaktligen kan du också använda bilder av en bock och ett kryss för att visa användaren om han fyllt i allt korrekt.

Stilar för obligatoriska fält

Jag skulle också vilja notera att motsvarande pseudo-klass har dykt upp för obligatoriska fält.
:required – kommer att välja element som har detta attribut. Det vill säga att alla fält måste fyllas i.
:optional – den motsatta klassen, kommer att välja fält som är valfria.

Pseudo-klass: inte

:not är ett slags antiväljare som låter dig bestämma vilka element ANVÄND INTE stilar. Ett par exempel.
A:not(:last-child)() – kommer att välja alla länkar på sidan utom den sista.
.nav:not(li)() – kommer att välja alla element med klass nav, men dessa ska inte vara listobjekt (li).
#article p:not(.special:first-child) – kommer att välja alla stycken i artikelblocket utom det första stycket med specialklassen.

Som du kan se är ett villkor skrivet inom parentes för pseudoklassen: vad exakt behöver uteslutas från urvalet. Du kan också skriva kombinationsväljare i villkoret, så att du kan välja och utesluta vad du vill.

Det här är pseudoklassen som ibland behövs, den behövs inte bara i teorin, utan också i praktiken. Åh ja, du kan också fortsätta att komponera väljaren efter :not(). Till exempel:
Div:not(#header) .wrap – väljer alla div med wrap-klassen, förutom div med id = "header"

Dessa var väljare som introducerades i CSS3.

Prioritet för css-väljare

För att avgöra vilka stilar som har företräde, använd dessa enkla regler:
ID är den högsta prioritetsväljaren. Om ett element har en stilklass och ett id , och båda tilldelas samma egenskaper med olika värden, kommer stilarna som skrivs för id:t att exekveras.

Klassen är en väljare med högre prioritet än taggväljaren (p, table, ul). En pseudoklass har samma vikt som en enkel klass. p:first-line har företräde framför .firstline eftersom den andra väljaren bara är en klass, medan den första är en taggväljare + pseudoklass.

En annan användbar regel är att ju mer specifik väljaren är, desto mer prioriterade stilar är för den. Till exempel, mellan body och p, vinner stycket striden eftersom det är en mer specifik väljare än body (eftersom det är hela sidan, så inte särskilt specifik). Tabell p är i sin tur mer specifik än bara p . I allmänhet är det bara att vara medveten om dessa regler.

Slutsats

Den här artikeln täckte inte attributväljare, men i allmänhet har jag redan skrivit om dem tidigare. Jag önskar dig framgång med att lära dig webbplatsbyggande, inklusive CSS-väljare.

Jag skulle också vilja tillägga att om du använder jQuery så har den sina egna väljare, även om de är väldigt lika dessa, men det finns små skillnader.

Senaste uppdatering: 2016-04-21

Att definiera en stil börjar med en väljare. Till exempel:

Div( width:50px; /* width */ height:50px; /* höjd */ bakgrundsfärg:röd; /* bakgrundsfärg */ marginal: 10px; /* indrag från andra element */ )

I detta fall är väljaren div . Ett antal väljare ärver namnet på de formaterade elementen, till exempel div, p, h2, etc. När en sådan väljare är definierad kommer dess stil att tillämpas på alla element som matchar denna väljare. Det vill säga, den ovan definierade stilen kommer att tillämpas på alla element

på webbsidan:

CSS-väljare

Det finns 3 divs på sidan, och de kommer alla att utformas:

Klasser

Ibland kräver samma element olika styling. Och i det här fallet kan vi använda klasser.

För att definiera en klassväljare i CSS placeras en punkt före klassnamnet:

RedBlock( bakgrundsfärg:röd; )

Klassnamnet kan vara godtyckligt. Till exempel, i det här fallet är klassnamnet "redBlock". Det är dock tillåtet att använda bokstäver, siffror, bindestreck och understreck i klassnamnet och klassnamnet måste börja med en bokstav.

Det är också värt att överväga fallet med namn: namnen "artikel" och "ARTIKEL" kommer att representera olika klasser.

När en klass väl har definierats kan vi tillämpa den på ett element med hjälp av class-attributet. Till exempel:

Låt oss definiera och använda flera klasser:

CSS klasser

Identifierare

För att identifiera element som är unika på en webbsida används identifierare, som bestäms med hjälp av id-attribut. En sida kan till exempel ha ett huvudblock eller en rubrik:

Att definiera stilar för identifierare liknar att definiera klasser, bara hash-symbolen # används istället för en punkt:

Sidhuvud

Huvudinnehåll

Sidfot

Det är dock värt att notera att identifierare har mer att göra med webbsidans struktur och mindre med styling. Klasser används för styling snarare än identifierare.

Universalväljare

Förutom tagg-, klass- och identifieringsväljare har css även den så kallade universalväljare, som representerar asterisken (*). Den tillämpar stilar på alla element på HTML-sidan:

*(bakgrundsfärg: röd;)

Styla en grupp väljare

Ibland tillämpas vissa stilar på en rad väljare. Vi vill till exempel lägga en understrykning på alla rubriker. I det här fallet kan vi lista väljare för alla element separerade med kommatecken:

CSS3

Väljare

Väljargrupp

Lite text...

En väljargrupp kan innehålla både taggväljare och klass- och identifierareväljare, till exempel:

H1, #header, .redBlock( färg: röd; )