Share
Vi har byggt en komplett guide för att hjälpa dig att lära dig CSS, oavsett om du bara har börjat med grunderna eller vill utforska mer avancerad CSS.
Så du lärde dig basen id, klass, och ättling väljare - och kallade det då en dag? Om så är fallet saknar du en enorm flexibilitet. Medan många av de väljare som nämns i den här artikeln är en del av CSS3-specifikationen och därför endast är tillgängliga i moderna webbläsare, är du skyldig att själv begära dessa till minne.
Och förresten, om du har problem med din CSS och vill att en pro ska titta över det och åtgärda eventuella fel kan du hitta några kvalificerade frilansare på Envato Studio.
* marginal: 0; vaddering: 0;
Låt oss slå de uppenbara ut för nybörjare, innan vi går vidare till de mer avancerade selektorerna.
Stjärnsymbolen riktar sig till varje enskilt element på sidan. Många utvecklare kommer att använda det här tricket för att nollställa marginals och stoppning. Även om det här verkligen är bra för snabba tester, skulle jag råda dig att aldrig använda det i produktionskod. Det lägger till för mycket vikt på webbläsaren, och är onödigt.
De * kan även användas med barnväljare.
#container * border: 1px solid black;
Detta kommer att rikta sig till varje enskilt element som är ett barn av #behållare div. Återigen, försök att inte använda denna teknik mycket, om någonsin.
Visa demo
#container width: 960px; marginal: auto;
Förkodning av hashsymbolen till en väljare tillåter oss att rikta in sig på id. Detta är lätt den vanligaste användningen, men var försiktig när du använder id selektorer.
Fråga dig själv: behöver jag absolut tillämpa en
idtill detta element för att rikta det?
id selektorer är styva och tillåter inte återanvändning. Om möjligt, försök först använda ett taggnamn, ett av de nya HTML5-elementen, eller till och med en pseudoklass.
Visa demo
.fel färg: röd;
Det här är en klass väljare. Skillnaden mellan ids och klassDet är med den senare att du kan rikta flera element. Använda sig av klasses när du vill att din styling ska tillämpas på en grupp av element. Alternativt, använd ids för att hitta en nål i höstack och stila bara det specifika elementet.
Visa demo
li en text-decoration: none;
Nästa kommentarsväljare är ättling väljare. När du behöver vara mer specifik med dina selektörer använder du dessa. Till exempel, vad händer, snarare än inriktning Allt ankare, behöver du bara rikta ankare som ligger inom en oorderad lista? Detta är speciellt när du använder en efterföljande väljare.
Proffstips - Om din väljare ser ut
X Y Z A B.error, Du gör fel. Fråga alltid om det är absolut nödvändigt att tillämpa allt detta vikt.
Visa demo
en färg: röd; ul margin-left: 0;
Vad händer om du vill rikta in alla element på en sida, enligt deras typ, snarare än en id eller klassnamn? Håll det enkelt och använd en typväljare. Om du behöver rikta in alla oorderade listor, använd ul .
Visa demo
a: länk färg: röd; a: visted färg: lila;
Vi använder :länk pseudo-klass för att rikta alla ankare-taggar som ännu inte har klickats på.
Alternativt har vi också :besökt pseudoklass, som, som du hade förväntat oss, tillåter oss att tillämpa specifik styling till endast ankarkoderna på sidan som ha har klickat på eller besökt.
Visa demo
ul + p färg: röd;
Detta kallas en angränsande väljare. Det kommer att välja endast det element som omedelbart föregås av det tidigare elementet. I det här fallet, endast första stycket efter varje ul kommer att ha röd text.
Visa demo
div # container> ul border: 1px solid black;
Skillnaden mellan standarden X Y och X> Y är att den senare bara väljer direkta barn. Tänk på följande markup.
- Listobjekt
- Barn
- Listobjekt
- Listobjekt
- Listobjekt
En väljare av #container> ul kommer bara att rikta in sig på uls som är direkt barn av div med en id av behållare. Det kommer inte att riktas mot, till exempel, ul det är ett barn av det första li.
Av detta skäl finns det fördelar med användandet av barnkombinationen. Faktum är att det rekommenderas speciellt när man arbetar med JavaScript-baserade CSS-väljarmotorer.
Visa demo
ul ~ p färg: röd;
Den här syskonkombinationen liknar X + Y, Det är dock mindre strängt. Medan en närliggande väljare (ul + p) väljer bara det första elementet som är omedelbart föregås av den tidigare väljaren, den här är mer generaliserad. Det kommer att välja, med hänvisning till vårt exempel ovan, någon p element, så länge de följer en ul.
Visa demo
en [titel] färg: grön;
Hänvisas till som en attribut väljare, i vårt exempel ovan kommer det här bara att välja ankarkoder som har en titel attribut. Ankare taggar som inte kommer att få denna speciella styling. Men, om du behöver vara mer specifik? Väl?
Visa demo
a [href = "http://net.tutsplus.com"] färg: # 1f6053; / * nätgröna * /
Stycket ovan kommer att ställa in alla ankarkoder som länkar till http://net.tutsplus.com; De får vår märkesgröna färg. Alla andra ankarkoder kommer att förbli opåverkade.
Observera att vi lägger in värdet i citat. Kom ihåg att också göra detta när du använder en JavaScript CSS-väljarmotor. Använd alltid CSS3-väljare om oofficiella metoder när det är möjligt.
Det fungerar bra, men det är lite styvt. Vad händer om länken riktar sig direkt till Nettuts +, men kanske är banan nettuts.com snarare än hela webbadressen? I de fallen kan vi använda lite av syntaxen med regelbundna uttryck.
Visa demo
a [href * = "tuts"] färg: # 1f6053; / * nätgröna * /
Där går vi det är vad vi behöver. Stjärnan betecknar att förloppsvärdet måste visas någonstans i attributets värde. På så sätt täcker detta nettuts.com, net.tutsplus.com, och även tutsplus.com.
Tänk på att detta är ett brett uttalande. Vad händer om ankaretiketten är kopplad till någon annan än Envato-plats med strängen tuts i webbadressen? När du behöver vara mer specifik, använd ^ och $, för att referera till början respektive slutet av en sträng.
Visa demo
a [href ^ = "http"] bakgrund: url (sökväg / till / extern / icon.png) no-repeat; padding-left: 10px;
Någonsin undrar 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 brukar användas i vanliga uttryck för att ange början på en sträng. Om vi vill rikta in alla ankarkoder som har en href som börjar med http, vi kan använda en väljare som liknar det ovan beskrivna stycket.
Observera att vi inte söker efter
http: //; Det är onödigt, och tar inte hänsyn till de webbadresser som börjar medhttps: //.
Nu, vad händer om vi vill ställa in alla ankare istället för att säga ett foto? I så fall letar vi efter slutet av strängen.
Visa demo
a [href $ = ".jpg"] färg: röd;
Återigen använder vi en vanlig expressionssymbol, $, att hänvisa 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 det verkligen inte kommer att fungera gif och pngs.
Visa demo
a [data-filetype = "image"] färg: röd;
Hänvisa till nummer åtta; hur kompenserar vi för alla olika bildtyper: png, jpeg,jpg, gif? Tja, vi kunde skapa flera selektörer, till exempel:
en [href $ = ".jpg"], en [href $ = ".jpeg"], en [href $ = ".png"], en [href $ = ".gif"] färg: röd;
Men det är en smärta i rumpan och är ineffektiv. En annan möjlig lösning är att använda anpassade attribut. Vad händer om vi lägger till våra egna data filtyp attribut till varje ankare som länkar till en bild?
Bildlänk
Då med det krok På plats kan vi använda en standard attributväljare för att endast rikta de ankare.
a [data-filetype = "image"] färg: röd;
Visa demo
en [data-info ~ = "extern"] färg: röd; en [data-info ~ = "bild"] gräns: 1px solid svart;
Här är en speciell som kommer att imponera på dina vänner. Inte så många människor vet om det här tricket. Tilda (~) -symbolen tillåter oss att rikta ett attribut som har en åtskild värdeslista.
Går överens med vårt anpassade attribut från nummer femton ovan kan vi skapa en uppgifter-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.
"Klicka på mig, dåre
Med den här markeringen på plats kan vi nu rikta in några taggar som har något av dessa värden, genom att använda ~ attributvalet trick.
/ * Måldata-info attr som innehåller värdet "externt" * / a [data-info ~ = "externt"] färg: röd; / * Och som innehåller värdet "bild" * / a [data-info ~ = "image"] border: 1px solid black;
Ganska smutsigt, ay?
Visa demo
input [typ = radio]: markerad border: 1px solid black;
Denna pseudoklass kommer endast att rikta mot ett användargränssnitt som har varit kontrollerade - som en radioknapp eller kryssrutan. Så enkelt är det.
Visa demo
De innan och efter pseudoklasser sparkstöt. Varje dag verkar det, att 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 för dessa klasser när de stötte på den klara fixhacken.
.clearfix: efter innehåll: ""; display: block; klara: båda; synlighet: gömd; typsnittstorlek: 0; höjd: 0; .clearfix * display: inline-block; _höjd: 1%;
Detta hacka använder :efter pseudoklass för att lägga till ett mellanslag efter elementet och sedan rensa det. Det är ett utmärkt knep att ha i din väska, speciellt i de fall då överflöde: gömd; Metoden är inte möjlig.
För ytterligare en kreativ användning av detta, se mitt snabba tips om hur du skapar skuggor.
Enligt CSS3 Selectors-specifikationen bör du tekniskt använda pseudoelementsyntaxen av två kolon
::. För att förbli kompatibelt accepterar användaragenten också en enda kolonanvändning. Faktum är att det här är smartare att använda single-colon-versionen i dina projekt.
div: svävar (bakgrund: # e3e3e3;
Åh kom igen. Du vet den här. Den officiella termen för detta är användaraktivitetspseudoklass. Det låter förvirrande, men det är det inte. Vill du söka en specifik styling när en användare svänger över ett element? Detta kommer att få jobbet gjort!
Tänk på att den äldre versionen av Internet Explorer inte svarar när
:svävapseudoklass tillämpas på något annat än en ankare.
Du använder oftast den här väljaren när du ansöker, till exempel a border-botten att ankare taggar, när svängt över.
a: svävar gräns-botten: 1px solid svart;
Proffstips -
gränsbotten: 1px solid svart;ser bättre ut äntext-dekoration: understryka;.
div: not (#container) färg: blå;
De negation pseudoklassen är särskilt hjälpsam. Låt oss säga att jag vill välja alla div, förutom den som har en id av behållare. Biten ovan kommer att hantera den här uppgiften perfekt.
Eller om jag ville välja varje enskilt element (inte rekommenderat) förutom styckena, kunde vi göra det:
*: inte (p) färg: grön;
Visa demo
p :: första raden font-weight: bold; typsnittstorlek: 1.2em;
Vi kan använda pseudoelement (betecknas av ::) att utforma fragment av ett element, såsom första raden eller första bokstaven. Tänk på att dessa måste tillämpas på blocknivåelement för att kunna träda i kraft.
Ett pseudoelement består av två kolon:
::
p :: första bokstaven float: left; typsnittstorlek: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;
Detta stycke är en abstraktion som kommer att hitta alla stycken på sidan och sedan sub-målet endast den första bokstaven i det elementet.
Detta används oftast för att skapa tidningsliknande styling för en bokstavs första bokstav.
p :: första raden font-weight: bold; typsnittstorlek: 1.2em;
På samma sätt, ::Första linjen pseudoelementet kommer, som förväntat, bara att ange den första raden av elementet.
"För kompatibilitet med befintliga stilark måste användaragenter också acceptera den tidigare en-kolonnotationen för pseudoelement som introduceras i CSS nivå 1 och 2 (nämligen: första raden,: första bokstaven, före och efter). Denna kompatibilitet är inte tillåten för de nya pseudoelementen som införs i denna specifikation. " - Källa
Visa demo
li: nth-child (3) färg: röd;
Kom ihåg de dagar då vi inte hade möjlighet att rikta specifika element i en stack? De n: te-barn pseudoklassen löser det!
Vänligen notera att n: te-barn accepterar ett heltal som en parameter, men detta är inte nollbaserat. Om du vill rikta in det andra listobjektet använder du li: n: te-barn (2).
Vi kan även använda detta för att välja en variabel uppsättning barn. Till exempel kan vi göra li: n: te-barn (4n) för att välja varje fjärde listobjekt.
Visa demo
li: n-sista-barnet (2) färg: röd;
Vad händer om du hade en stor lista med saker i en ul, och behövde bara komma åt, säg den tredje till sista objektet? Snarare än att göra li: n: te-barn (397), du kan istället använda n: te-sista barn pseudoklass.
Denna teknik fungerar nästan identiskt från nummer 16 ovan, men skillnaden är att den börjar i slutet av samlingen och fungerar tillbaka.
Visa demo
ul: nth-of-type (3) border: 1px solid black;
Det kommer att finnas tillfällen när, istället för att välja en barn, du behöver istället välja enligt typ av elementet.
Föreställ dig mark-up som innehåller fem oorderade listor. Om du bara vill stila den tredje ul, och hade inte en unik id att haka i, du kan använda n: te-of-typ (n) pseudoklass. I biten ovan, bara den tredje ul kommer att ha en kant runt den.
Visa demo
ul: nth-last-of-type (3) border: 1px solid black;
Och ja, för att förbli konsekvent, kan vi också använda n: te-sista-of-typ att börja i slutet av listan över väljare och arbeta tillbaka för att rikta in det önskade elementet.
ul li: första barnet border-top: none;
Denna strukturella pseudoklass tillåter oss att rikta endast det första barnet till 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 säga att du har en lista över rader, och var och en har en border-top och a border-botten. Tja, med det arrangemanget kommer det första och sista föremålet i den uppsättningen att se lite udda ut.
Många designers tillämpar klasser av först och sista för att kompensera för detta. I stället kan du använda dessa pseudoklasser.
Visa demo
ul> li: sista barnet färg: grön;
Motsatsen av förstfödde, sista barnet kommer att rikta den sista delen av elementets förälder.
Låt oss bygga ett enkelt exempel för att visa en möjlig användning av dessa klasser. Vi skapar ett stylat listobjekt.
Inget speciellt här; bara en enkel lista.
ul bredd: 200px; bakgrund: # 292929; färg vit; listestil: none; padding-left: 0; li vaddering: 10px; gränsbotten: 1px solid svart; border-top: 1px solid # 3c3c3c;
Denna styling ställer in en bakgrund, ta bort webbläsarens standardpolning 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 en
border-bottentill varjelidet är en nyans eller två mörkare än denlibakgrundsfärg. Använd sedan enborder-topvilket är ett par nyanser lättare.
Det enda problemet, som visas i bilden ovan, är att en gräns kommer att appliceras längst upp och längst ner på den oordnade listan - vilket ser ud som udda. Låt oss använda :förstfödde och :sista barnet pseudoklasser för att fixa detta.
li: första barnet border-top: none; li: sista barnet gränsbotten: ingen;
Där går vi som åtgärdar det!
Visa demo
Yep - IE8 stöds :förstfödde, men inte :sista barnet. Gissa.
div p: only-child color: red;
Sanningsvis kommer du förmodligen inte att hitta dig själv med hjälp av enda barnet pseudoklass för ofta. Det är ändå tillgängligt, om du behöver det.
Det låter dig rikta in element som är endast barnets förälder. Om du exempelvis hänvisar till snippet ovan, bara det stycke som är det enda barnet i div kommer att bli färgad, röd.
Låt oss anta följande markup.
Min paragraf här.
Två stycken totalt.
Två stycken totalt.
I det här fallet är det andra divs stycken kommer inte att riktas in bara den första div. Så fort du applicerar mer än ett barn till ett element, så enda barnet pseudoklassen upphör att träda i kraft.
Visa demo
li: endast-av-typ font-weight: bold;
Denna strukturella pseudoklass kan användas på några kloka sätt. Det kommer att rikta in sig på element som inte har några syskon i sin förälderbehållare. Som ett exempel, låt oss rikta alla uls, som endast har en enda listobjekt.
Först, fråga dig själv hur du skulle utföra denna uppgift? Du kan göra det ul li, men det skulle vara målet Allt listobjekt. Den enda lösningen är att använda endast-of-typ.
ul> li: endast-av-typ font-weight: bold;
Visa demo
De första i-typ pseudoklassen låter dig välja de första syskonen av sin typ.
För att bättre förstå detta, låt oss få ett test. Kopiera följande mark-up till din kodredigerare:
Min paragraf här.
- Lista Artikel 1
- Lista 2
- Lista 3
- Lista objekt 4
Nu, utan att läsa mer, försök att räkna ut hur man bara riktar in sig "Listobjekt 2". När du har räknat ut det (eller givit upp), läs vidare.
Det finns olika sätt att lösa detta test. Vi granskar en handfull av dem. Låt oss börja med att använda första i-typ.
ul: första-av-typ> li: nth-child (2) font-weight: bold;
Det här stycket säger i huvudsak att "hitta den första oordnade listan på sidan, hitta bara de närmaste barnen, vilka är listobjekt. Därefter filtrerar du ner till endast det andra listobjektet i den uppsättningen.
Ett annat alternativ är att använda den intilliggande väljaren.
p + ul li: sista barnet font-weight: bold;
I detta scenario hittar vi ul som omedelbart fortsätter p tagg, och hitta sedan elementets allra sista barn.
Vi kan vara lika motbjudande eller så lekfulla som vi vill ha med dessa väljare.
ul: först-av-typ li: nth-last-child (1) font-weight: bold;
Den här gången tar vi den första ul på sidan, och hitta sedan det allra första listobjektet, men börja från botten! :)
Visa demo
Om du kompenserar för äldre webbläsare, som Internet Explorer 6, behöver du fortfarande vara försiktig när du använder dessa nyare väljare. Men snälla låt inte det avskräcka dig från att lära dig dessa. Du skulle göra en stor misshandel till dig själv. Var noga med att hänvisa här till en lista över kompatibilitet med webbläsaren. Alternativt kan du använda Dean Edwards utmärkta IE9.js-skript för att få stöd för dessa väljare till äldre webbläsare.
För det andra försöker du, när du arbetar med JavaScript-bibliotek, som den populära jQuery, 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äljarmotorn kan använda webbläsarens inbyggda parsing, istället för sin egen.
Det är fantastiskt att du spenderar tid på att lära sig 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-artiklar för att du ska överväga:
Här är en handfull av de färdiga-använd-CSS-kodpunkterna Envato Market som du kanske tycker är användbar.
Denna Mega Drop Down Meny är en flexibel och lätt att integrera lösning för att bygga dina egna menyer. Nedrullningen är endast beroende av CSS / XHTML och levereras med ett fullständigt kontaktformulär.
CSS3 Mega Drop Down-menynCSS3 Responsive Web Pricing Tabeller Grids är ett paket med rena CSS3, responsiva och näthinniga prissättningstabeller. Mallen levereras med 2 tabellformat, 20 fördefinierade färgskinn, animerade svävarstillstånd, möjlighet att ställa in en eller flera kolumner som aktiv (poppad upp) som standard, CSS3-band, CSS3-verktygstips, 20 teckensnittsbaserade ja / nej ikoner.
Denna version är avsedd för alla anpassade CMS-baserade webbplatser och för icke-CMS-webbplatser och kommer att fungera med raka HTML- eller PHP-baserade webbplatser.
CSS3 Responsive Web Pricing Tabeller GridsTooltip är en snygg, modern gentleman som visas när det är showtime. Dess funktioner inkluderar:
VerktygstipsetMegaNavbar är en ren HTML5 / CSS3 navigeringskomponent, som använder standard navbar-markup och vätskegridsystemklasserna från Bootstrap 3. Det fungerar för fasta och lyhörda layouter och har möjligheten att inkludera andra Bootstrap-komponenter. MegaNavbar är kompatibel med mobila enheter och moderna webbläsare.
MegaNavbar (v 2.2.0). Avancerad Mega Meny för Bootstrap 3.0+Det här paketet med CSS3 Pricing Tables är en komplett lösning för att bygga fantastiska bord på några minuter. Den levereras med 6 färgvarianter samt 2 bordvarianter (ljus eller mörk).
Responsive CSS3 prissättningstabeller
Accentsconagua