lär dig CSS: den kompletta guiden

Vi har byggt en komplett guide som hjälper dig att lära dig CSS, oavsett om du just har börjat med grunderna eller om du vill utforska mer avancerad CSS.

CSS-väljare

så du lärde dig basen id, class och descendant väljare—och kallade det sedan en dag? I så fall går du miste om en enorm flexibilitet. Du är skyldig dig själv att begå dessa avancerade CSS och CSS3 väljare till minne.

grundläggande väljare

1., *

* { margin: 0; padding: 0;}

låt oss slå ut de uppenbara, för nybörjare, innan vi går vidare till de mer avancerade väljarna.

stjärnsymbolen kommer att rikta varje enskilt element på sidan. Många utvecklare kommer att använda detta trick för att nollställa margins ochpadding. Även om detta är säkert bra för snabba tester, skulle jag råda dig att aldrig använda detta i produktionskoden. Det lägger för mycket vikt på webbläsaren, och är onödigt.

* kan också användas med barnväljare.,

#container * { border: 1px solid black;}

detta kommer att inriktas på varje enskilt element som är ett barn till#containerdiv. Återigen, försök att inte använda denna teknik väldigt mycket, om någonsin.

2. # X

#container { width: 960px; margin: auto;}

prefix hash-symbolen till en väljare gör att vi kan rikta in oss på id. Detta är lätt den vanligaste användningen; dock vara försiktig när du använderid väljare.,

fråga dig själv: behöver jag absolut tillämpa ettid på detta element för att rikta det?

id väljarna är styva och tillåter inte återanvändning. Om möjligt, försök först att använda ett taggnamn, ett av de nya HTML5-elementen, eller till och med en pseudo-klass.

3. .X

.error { color: red;}

det här är en class – väljare. Skillnaden mellanids ochclasses är att med den senare kan du rikta in flera element., Använd class es när du vill att din styling ska gälla för en grupp element. Alternativt, använd id s för att hitta en nål i en höstack, och stil bara det specifika elementet.

4. X

a { color: red; }ul { margin-left: 0; }

vad händer om du vill rikta alla element på en sida, enligt deras type, snarare än en id eller classnamn? Håll det enkelt och använd en typväljare. Om du behöver inrikta dig på alla oordnade listor använder du ul {}.,

Live Demo of Basic Selectors

Combinator Selectors

5. X Y

li a { text-decoration: none;}

den näst vanligaste väljaren är väljaren descendant. När du behöver vara mer specifik med dina väljare använder du dessa. Till exempel, vad händer om du, i stället för att rikta in alla ankartaggar, bara behöver rikta in de ankare som finns i en oordnad lista? Detta är specifikt när du skulle använda en ättling väljare.

Pro-tip: om väljaren ser ut somX Y Z A B.error gör du det fel., Fråga dig alltid om det är absolut nödvändigt att tillämpa all den vikten.

6. X + Y

ul + p { color: red;}

detta kallas en intilliggande väljare. Det väljer bara det element som omedelbart föregås av det tidigare elementet. I det här fallet kommer endast det första stycket efter varje ul att ha röd text.

7., X > Y

div#container > ul { border: 1px solid black;}

skillnaden mellan standarden X Y och X > Y är att den senare endast väljer direkta barn. Tänk till exempel på följande markering.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

en väljare av #container > ul kommer endast att rikta in sig på uls som är direkta barn till div med en id av container container., Det kommer till exempel inte att rikta in sig på ul som är ett barn till det första li.

av denna anledning finns det prestandafördelar vid användning av barnkammaren. Faktum är att det rekommenderas särskilt när man arbetar med JavaScript-baserade CSS-väljare motorer.

8. X ~ Y

ul ~ p { color: red;}

denna syskon combinator liknar X + Y, men det är mindre strikt., Medan en intilliggande väljare (ul + p) bara väljer det första elementet som omedelbart föregås av den tidigare väljaren, är den här mer generaliserad. Det kommer att välja, med hänvisning till vårt exempel ovan, alla p element, så länge de följer en ul.

live Demo of Combinator Selectors

Attributväljare

9. X

a { color: green;}

hänvisad till som en attributväljare, i vårt exempel ovan, kommer detta endast att välja de ankartaggar som har ett title attribut., Ankare taggar som inte kommer att få denna speciella styling. Men vad händer om du behöver vara mer specifik? Kolla in nästa exempel!

10. X

a { color: #83b348; /* Envato green */}

kodavsnittet ovan kommer att forma alla ankartaggar som länkar till https://code.tutsplus.com; de får vår märkta gröna färg. Alla andra ankarmärken förblir opåverkade.

Observera att vi förpackar värdet i citat. Kom ihåg att också göra detta när du använder en JavaScript CSS-väljare motor. Om möjligt, använd alltid CSS3-väljare över inofficiella metoder.,

detta fungerar bra, även om det är lite styvt. Vad händer om länken verkligen direkt till Envato Tuts+, men kanske vägen är code.tutsplus.com snarare än den fullständiga webbadressen? I dessa fall kan vi använda lite av syntaxen reguljära uttryck.

11. X

a { color: #83b348; /* Envato green */}

Där går vi; det är vad vi behöver. Stjärnan anger att värdet för förfarandet måste visas någonstans i attributets värde. På så sätt täcker detta tutsplus.com, code.tutsplus.com, och även webdesign.tutsplus.com.

Tänk på att detta är ett brett uttalande., Vad händer om ankartaggen kopplad till någon icke-Envato webbplats med strängen tutsplus i webbadressen? När du behöver vara mer specifik, använd ^ och $ för att referera till början och slutet av en sträng.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

har du någonsin undrat hur vissa webbplatser kan visa en liten ikon bredvid länkarna som är externa? Jag är säker på att du har sett dessa tidigare; de är trevliga påminnelser om att länken kommer att leda dig till en helt annan webbplats.

detta är en cinch med karatsymbolen., Det används oftast i reguljära uttryck för att beteckna början på en sträng. Om vi vill inrikta oss på alla ankartaggar som har en href som börjar med http kan vi använda en väljare som liknar snippet som visas ovan.

Lägg märke till att vi inte söker efter; det är onödigt, och står inte för de webbadresser som börjar med

nu, vad händer om vi istället ville styla alla ankare som länkar till, säg, ett foto?, I dessa fall, låt oss söka efter slutet av strängen.

13. X

a { color: red;}

igen använder vi en symbol för reguljära uttryck, $, för att referera till slutet av en sträng. I det här fallet söker vi efter alla ankare som länkar till en bild—eller åtminstone en URL som slutar med .jpg. Tänk på att detta inte kommer att fånga GIF och PNG-bilder.

14. X

a { color: red;}

hur kompenserar vi för alla olika bildtyper?, Tja, vi kan skapa flera väljare, till exempel:

a,a,a,a { color: red;}

men det är en smärta, och det är ineffektivt. En annan möjlig lösning är att använda egna attribut. Vad händer om vi lagt till vår egen data-filetype attribut till varje ankare som länkar till en bild?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

då, med den kroken på plats, kan vi använda en standardattributväljare för att rikta endast dessa ankare.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

Här är en speciell som kommer att imponera på dina vänner. Inte alltför många människor vet om detta trick., Med symbolen tilde (~) kan vi inrikta oss på ett attribut som har en lista med värden som är åtskilda från rymden.

tillsammans med vårt anpassade attribut från nummer 15 ovan kan vi skapa ettdata-info-attribut, som kan få en rymdseparerad lista över allt vi behöver notera. I det här fallet noterar vi Externa länkar och länkar till bilder—bara för exemplet.,

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

med den markeringen på plats kan vi nu rikta in alla taggar som har något av dessa värden genom att använda ~ attributs selector trick.

ganska tjusig, va?

Live Demo of Attribute Selectors

Pseudo Selectors

16. X: visited och X: link

a:link { color: red; }a:visited { color: purple; }

vi använder :link pseudo-klass för att rikta alla ankartaggar som ännu inte har klickats på.,

alternativt har vi också :visited pseudo-klassen, som, som du förväntar dig, tillåter oss att tillämpa specifik styling på endast ankartiketterna på sidan som har klickats på eller ”besökt”.

17. X: markerad

input:checked { border: 1px solid black;}

den här pseudoklassen riktar sig endast mot ett användargränssnitt som har markerats—som en radioknapp eller kryssruta. Så enkelt är det.

18. X: efter

before och after pseudoklasser är bra., Varje dag verkar det som om människor hittar nya och kreativa sätt att använda dem effektivt. De genererar helt enkelt innehåll runt det valda elementet.

många introducerades först till dessa klasser när de stötte på clear-fix hacka.

detta hack använder :after pseudo klass för att lägga till ett utrymme efter elementet, och sedan rensa den. Det är ett utmärkt trick att ha i din Verktygspåse, särskilt i de fall dåoverflow: hidden; – metoden inte är möjlig.

för en annan kreativ användning av detta, se mitt snabba tips om att skapa skuggor.,

enligt CSS3 Selectors-specifikationen bör du tekniskt använda pseudoelementets syntax för två kolon::. Men för att förbli kompatibel, kommer användaragenten acceptera en enda kolon användning också.

19. X: sväva

div:hover { background: #e3e3e3;}

Oh kom igen. Du känner den här. Den officiella termen för detta är”user action pseudo class”. Det låter förvirrande, men det är verkligen inte. vill du använda specifik styling när en användare svävar över ett element? Detta kommer att få jobbet gjort!,

tänk på att äldre versioner av Internet Explorer inte svarar när:hover pseudo-klassen tillämpas på något annat än en ankartagg.

du använder oftast den här väljaren när du till exempel använder en border-bottom för att förankra taggar när du svävar över.

a:hover { border-bottom: 1px solid black;}

Pro-Tips:border-bottom: 1px solid black; ser bättre ut äntext-decoration: underline;.

20., X: not (selector)

div:not(#container) { color: blue;}

negation pseudo-klassen är särskilt användbar. Låt oss säga att jag vill välja alla divs, förutom den som har ett id för container. Kodavsnittet ovan kommer att hantera den uppgiften perfekt.

eller, om jag ville välja varje enskilt element (rekommenderas inte) förutom paragraftaggar, kunde vi göra:

*:not(p) { color: green;}

21., X::pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

Vi kan använda pseudoelement (betecknade av ::) för att formatera fragment av ett element, till exempel den första raden eller den första bokstaven. Tänk på att dessa måste tillämpas på blocknivåelement för att träda i kraft.,

ett pseudo-element består av två kolon:::

rikta den första bokstaven i ett stycke

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

detta utdrag är en abstraktion som kommer att hitta alla stycken på sidan, och sedan sub-target endast den första bokstaven i det elementet.

detta används oftast för att skapa tidningsliknande styling för första bokstaven i en artikel.,

rikta den första raden i ett stycke

p::first-line { font-weight: bold; font-size: 1.2em;}

på samma sätt kommer::first-line pseudo-elementet, som förväntat, att forma den första raden i elementet endast.

”för kompatibilitet med befintliga formatmallar måste användaragenter också acceptera den föregående-kolonnotationen för pseudoelement som införs i CSS-nivåerna 1 och 2 (nämligen:first-line,:first-letter,:before och:after). Denna kompatibilitet är inte tillåten för de nya pseudo-element som införs i denna specifikation.,”—W3C Selectors Specs

live Demo of Pseudo Selectors

Nth Child and Type Selectors

22. X:nth-child(n)

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

Kom ihåg de dagar då vi inte hade något sätt att rikta specifika element i en stack? Dennth-child pseudo klassen löser det!

Observera attnth-child accepterar ett heltal som en parameter, men detta är inte nollbaserat. Om du vill rikta in det andra listobjektet använder du li:nth-child(2).

Vi kan även använda detta för att välja en variabel uppsättning barn., Till exempel kan vi göra li:nth-child(4n) för att välja vart fjärde listobjekt.

23. X:nth-last-child(n)

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

vad händer om du hade en enorm lista över objekt i en ul, och du behövde bara komma åt, säg det tredje till sista objektet? I stället för att görali:nth-child(397) kan du istället användanth-last-child pseudo-klassen.

denna teknik fungerar nästan identiskt med nummer 16 ovan. Skillnaden är att den börjar i slutet av samlingen och arbetar sig tillbaka.

24., X: nth-of-type(n)

ul:nth-of-type(3) { border: 1px solid black;}

det kommer att finnas tillfällen då, i stället för att välja en child, du måste istället välja enligt elementet type.

Föreställ dig markering som innehåller fem oordnade listor. Om du bara ville forma den tredje ul och inte hade en unik id för att koppla in, kan du använda nth-of-type(n) pseudo-klassen. I kodavsnittet ovan kommer endast den tredje ul att ha en kant runt den.

25., X: nth-last-of-type (n)

ul:nth-last-of-type(3) { border: 1px solid black;}

och ja, för att förbli konsekvent, kan vi också använda nth-last-of-type för att börja i slutet av väljarlistan och arbeta oss tillbaka för att rikta in det önskade elementet.

26. X: first-child

ul li:first-child { border-top: none;}

den här strukturella pseudoklassen gör att vi bara kan rikta in det första barnet i elementets förälder. Du använder ofta detta för att ta bort gränser från de första och sista listobjekten.

låt oss till exempel säga att du har en lista med rader, och var och en har enborder-top och enborder-bottom., Tja, med det arrangemanget kommer det första och sista objektet i den uppsättningen att se lite udda ut.

många designers använder klasser avfirst ochlast för att kompensera för detta. Istället kan du använda dessa pseudo klasser.

27. X: last-child

ul > li:last-child { color: green;}

motsatsen till first-child, last-child kommer att inrikta sig på det sista objektet i elementets överordnade.

last-child väljare exempel

låt oss bygga ett enkelt exempel för att visa en möjlig användning av dessa klasser., Vi skapar ett stylat listobjekt.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

för markeringen finns det inget speciellt: bara en enkel lista.

här är CSS:

denna styling kommer att ställa in en bakgrund, ta bort webbläsarens standardstoppning på ul, och tillämpa gränser för varje li för att ge lite djup.

för att lägga till djup i dina listor, använd enborder-bottom till varjeli det är en nyans eller två mörkare änlis bakgrundsfärg., Använd sedan enborder-top som är ett par nyanser ljusare.

det enda problemet, som visas i bilden ovan, är att en gräns kommer att tillämpas på toppen och botten av den oordnade listan—som ser udda ut. Låt oss använda:first-child och:last-child pseudoklasser för att åtgärda detta.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

Där går vi; det fixar det!

28., X: only-child

div p:only-child { color: red;}

sanningsenligt kommer du förmodligen inte att hitta dig själv medonly-child pseudo-klassen för ofta. Ändå är det tillgängligt, om du behöver det.

det låter dig rikta element som är det enda barnet i sin förälder. Om du till exempel hänvisar till kodavsnittet ovan, kommer endast det stycke som är det enda barnet i div att färgas rött.

låt oss anta följande markering.,

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

i det här fallet kommer det andradivs stycken inte att riktas; endast det förstadiv. Så snart du använder mer än ett barn till ett element upphör only-child pseudo-klassen att gälla.

29. X: only-of-type

li:only-of-type { font-weight: bold;}

denna strukturella pseudoklass kan användas på några smarta sätt. Det kommer att rikta element som inte har några syskon inom sin överordnade Behållare. Som ett exempel, låt oss rikta alla uls som bara har en enda listobjekt.,

först, fråga dig själv hur du skulle utföra denna uppgift. Du kan göra ul li, men detta skulle rikta alla listobjekt. Den enda lösningen är att använda only-of-type.

ul > li:only-of-type { font-weight: bold;}

30. X:first-of-type

first-of-type pseudo-klassen låter dig välja de första syskonen av dess typ.

ett Test

för att bättre förstå detta, låt oss ha ett test. Kopiera följande markering i din kodredigerare:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

försök nu, utan att läsa vidare, att räkna ut hur du endast riktar in ”listobjekt 2”., När du har räknat ut det (eller gett upp), läs vidare.

lösning 1

det finns en mängd olika sätt att lösa detta test. Vi granskar en handfull av dem. Låt oss börja med att använda first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

det här kodavsnittet säger i huvudsak att hitta den första oordnade listan på sidan och hitta bara de närmaste barnen, som är listobjekt. Filtrera sedan ner det till endast det andra listobjektet i den uppsättningen.

lösning 2

ett annat alternativ är att använda den intilliggande väljaren.,

p + ul li:last-child { font-weight: bold;}

i det här scenariot hittar vi ul som omedelbart fortsätter p – taggen och hittar sedan elementets allra sista barn.

lösning 3

Vi kan vara så motbjudande eller lika lekfulla som vi vill med dessa väljare.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

den här gången tar vi det första ul på sidan och hittar sedan det allra första listobjektet, men börjar från botten!,

Live Demo av Nth Child och Type Selectors

slutsats

om du kompenserar för äldre webbläsare, som Internet Explorer 6, måste du fortfarande vara försiktig när du använder dessa nyare väljare. Men låt inte det avskräcka dig från att lära dig dessa. Du skulle göra en stor otjänst för dig själv. Var noga med att referera här för en lista över webbläsarkompatibilitet. Alternativt kan du använda Dean Edwards utmärkta IE9.js script för att få stöd för dessa väljare till äldre webbläsare.,

För det andra, när du arbetar med JavaScript-bibliotek, som den populära jQuery, försök alltid använda dessa inbyggda CSS3-väljare över bibliotekets anpassade metoder/väljare, när det är möjligt. Det kommer att göra din kod snabbare, eftersom väljaren motorn kan använda webbläsarens infödda Tolkning, snarare än sin egen.

det är bra att du spenderar tid på att lära dig grundläggande webbdesign, men om du behöver en snabb lösning kan en av våra färdiga CSS-mallar vara ett bra alternativ. Vi har också några premium CSS-objekt för dig att överväga.,

• CSS3
  12 eleganta CSS pristabeller för ditt senaste webbprojekt
  Monty Shokeen
• Bootstrap 4
  18 bästa Bootstrap 4 Plugins
  Monty Shokeen

fri tillgång till Envato elements för 1 månad

slutligen, här är ett mycket speciellt erbjudande som hjälper dig att bygga professionella webbplatser och appar. Förutom att använda dessa CSS-väljare, varför inte dra nytta av högkvalitativa stock foton, videofilmer, PREMIUM typsnitt, grafik, illustrationer och mycket mer?,

normalt måste du betala för sådana resurser. Men just nu kan du få tillgång till miljontals kreativa tillgångar för dina kodningsprojekt i en hel månad, helt gratis. Och vad mer, du får obegränsad nedladdningar, så att du kan ta så mycket du vill under den månaden, och bara betala om du väljer att fortsätta!,

för att dra nytta av detta erbjudande, klicka på denna speciella registreringslänk eller ange koden nedan på registreringssidan:

elements_cont_tuts-freemonth1-4bwkbp

vänta inte för länge—erbjudandet gäller endast under en begränsad tid!