Share
We hebben een complete handleiding samengesteld om u te helpen bij het leren van CSS, of u nu net begint met de basis of als u meer geavanceerde CSS wilt verkennen.
Dus je hebt de basis geleerd ID kaart, klasse, en afstammeling selectors - en noemde het dan een dag? Als dat zo is, mis je een enorme mate van flexibiliteit. Hoewel veel van de selectors die in dit artikel worden genoemd deel uitmaken van de CSS3-specificatie en daarom alleen beschikbaar zijn in moderne browsers, bent u het aan uzelf verplicht om deze in het geheugen te vermelden.
En tussen haakjes, als je problemen hebt met je CSS en wilt dat een professional deze bekijkt en eventuele fouten oplost, kun je enkele gekwalificeerde freelancers vinden op Envato Studio.
* marge: 0; opvulling: 0;
Laten we de voor de hand liggende eruit halen, voor de beginners, voordat we verdergaan met de meer geavanceerde selectors.
Het stersymbool zal elk afzonderlijk element op de pagina targeten. Veel ontwikkelaars zullen deze truc gebruiken om de marges en vulling. Hoewel dit zeker goed is voor snelle tests, raad ik u aan dit nooit in de productiecode te gebruiken. Het voegt te veel toe gewicht in de browser en is niet nodig.
De * kan ook worden gebruikt met kindselectoren.
#container * border: 1px effen zwart;
Hiermee wordt elk afzonderlijk element dat een kind is van de #houder div. Nogmaals, probeer deze techniek niet zo vaak te gebruiken.
Demo bekijken
#container width: 960px; marge: automatisch;
Als u het hash-symbool aan een selector toevoegt, kunnen we targeten ID kaart. Dit is gemakkelijk het meest voorkomende gebruik, maar wees voorzichtig bij gebruik ID kaart selectors.
Stel uzelf de vraag: moet ik absoluut een
ID kaartnaar dit element om het te targeten?
ID kaart selectors zijn star en staan hergebruik niet toe. Probeer indien mogelijk eerst een tagnaam, een van de nieuwe HTML5-elementen of zelfs een pseudo-klasse te gebruiken.
Demo bekijken
.fout kleur: rood;
Dit is een klasse selector. Het verschil tussen ID kaarts en klassees is dat je met de laatste meerdere elementen kunt targeten. Gebruik klassees wanneer u wilt dat uw stijl van toepassing is op een groep elementen. Als alternatief, gebruik ID kaarts om een naald-in-een-hooiberg te vinden en alleen dat specifieke element te stylen.
Demo bekijken
li a text-decoration: none;
De volgende de beste reactieselector is de afstammeling selector. Wanneer u specifieker moet zijn met uw selectors, gebruikt u deze. Wat als, in plaats van targeting allemaal ankertags, hoeft u alleen de ankers te richten die zich in een ongeordende lijst bevinden? Dit is met name het geval wanneer u een afstammelaar kiest.
Pro-tip - Als uw selector eruit ziet
X Y Z A B.fout, je doet het verkeerd. Vraag jezelf altijd af of het absoluut noodzakelijk is om dat allemaal toe te passen gewicht.
Demo bekijken
een kleur: rood; ul margin-left: 0;
Wat als u alle elementen op een pagina wilt targeten, volgens hun type, in plaats van een ID kaart of klassenaam? Houd het simpel en gebruik een typekeuzeschakelaar. Als u alle niet-geordende lijsten wilt targeten, gebruik dan ul .
Demo bekijken
a: link color: red; a: bezocht color: purple;
Wij gebruiken de :link pseudo-klasse om alle ankertags te targeten waarop nog moet worden geklikt.
Als alternatief hebben we ook de : visited pseudo klasse, die, zoals je verwachtte, ons in staat stelt om specifieke styling toe te passen op alleen de ankertags op de pagina die hebben erop is geklikt, of bezocht.
Demo bekijken
ul + p kleur: rood;
Dit wordt een aangrenzende selector genoemd. Het zal selecteren enkel en alleen het element dat onmiddellijk wordt voorafgegaan door het vorige element. In dit geval alleen de eerste alinea na elk ul zal rode tekst hebben.
Demo bekijken
div # container> ul border: 1px effen zwart;
Het verschil tussen de standaard X Y en X> Y is dat de laatste alleen directe kinderen selecteert. Bekijk bijvoorbeeld de volgende markup.
- Lijstitem
- Kind
- Lijstitem
- Lijstitem
- Lijstitem
Een selector van #container> ul zal alleen het uls die directe kinderen zijn van de div Met een ID kaart van houder. Het zal zich bijvoorbeeld niet richten op het ul dat is een kind van de eerste li.
Om deze reden zijn er prestatievoordelen bij het gebruik van de combinator voor kinderen. In feite wordt dit aanbevolen, vooral wanneer u werkt met JavaScript-gebaseerde CSS-selectormotoren.
Demo bekijken
ul ~ p kleur: rood;
Deze broer / zus-combinator lijkt op X + Y, het is echter minder strikt. Terwijl een aangrenzende selector (ul + p) selecteert alleen het eerste element dat dat is per direct voorafgegaan door de voormalige selector, deze is meer gegeneraliseerd. Het selecteert, verwijzend naar ons voorbeeld hierboven, elk p elementen, zolang ze a volgen ul.
Demo bekijken
een [titel] kleur: groen;
Wordt aangeduid als een attributen selector, in ons voorbeeld hierboven selecteert dit alleen de ankertags met een titel attribuut. Ankertags die dit niet zullen ontvangen, ontvangen deze specifieke stijl niet. Maar wat als u specifieker moet zijn? Goed?
Demo bekijken
a [href = "http://net.tutsplus.com"] color: # 1f6053; / * nettuts groen * /
Het bovenstaande fragment geeft alle ankertags weer waarnaar wordt gelinkt http://net.tutsplus.com; ze zullen onze groene kleur krijgen. Alle andere ankertags blijven onaangetast.
Let op: we wikkelen de waarde tussen aanhalingstekens. Denk eraan om dit ook te doen bij het gebruik van een JavaScript CSS-selectorengine. Gebruik indien mogelijk altijd CSS3-selectors op niet-officiële manieren.
Dit werkt echter goed, het is een beetje rigide. Wat als de link inderdaad naar Nettuts + verwijst, maar misschien is het pad wel nettuts.com in plaats van de volledige URL? In die gevallen kunnen we een beetje van de reguliere expressiesyntaxis gebruiken.
Demo bekijken
a [href * = "tuts"] color: # 1f6053; / * nettuts groen * /
Daar gaan we; dat is wat we nodig hebben. De ster geeft aan dat de voortgangswaarde moet verschijnen ergens in de waarde van het kenmerk. Op deze manier dekt dit nettuts.com, net.tutsplus.com, en zelfs tutsplus.com.
Houd er rekening mee dat dit een brede verklaring is. Wat als het ankertag aan een niet-Envato-site is gekoppeld met de tekenreeks tuts in de url? Gebruik als u specifieker wilt zijn ^ en $, om te verwijzen naar respectievelijk het begin en het einde van een reeks.
Demo bekijken
a [href ^ = "http"] background: url (pad / naar / extern / icon.png) geen herhaling; padding-links: 10px;
Ooit afgevraagd hoe sommige websites een klein pictogram naast de externe links kunnen weergeven? Ik weet zeker dat je deze eerder hebt gezien; het zijn leuke herinneringen dat de link je naar een geheel andere website leidt.
Dit is een makkie met het karaatsymbool. Het wordt meestal gebruikt in reguliere expressies om het begin van een tekenreeks aan te duiden. Als we alle ankertags willen targeten die een a hebben href wat begint met http, we kunnen een selector gebruiken die lijkt op het hierboven getoonde fragment.
Merk op dat we niet op zoek zijn naar
http: //; dat is onnodig en is niet verantwoordelijk voor de urls die beginnenhttps: //.
Nu, wat als we in plaats daarvan alle ankers zouden willen stylen die naar bijvoorbeeld een foto linken? Laten we in die gevallen zoeken naar de einde van de string.
Demo bekijken
a [href $ = ".jpg"] kleur: rood;
Nogmaals, we gebruiken een reguliere expressiesymbool, $, om naar het einde van een string te verwijzen. In dit geval zoeken we naar alle ankers die naar een afbeelding linken - of op zijn minst naar een URL die eindigt .jpg. Houd er rekening mee dat dit zeker niet zal werken gifs en pngs.
Demo bekijken
a [data-filetype = "image"] color: red;
Verwijs terug naar nummer acht; hoe compenseren we voor alle verschillende afbeeldingstypen: png, jpeg,jpg, gif? Welnu, we kunnen meerdere selectors maken, zoals:
a [href $ = ". jpg"], a [href $ = ". jpeg"], a [href $ = ". png"], a [href $ = ". gif"] color: red;
Maar dat is een pijn in de kolf, en is inefficiënt. Een andere mogelijke oplossing is om aangepaste kenmerken te gebruiken. Wat als we de onze hebben toegevoegd data-bestandstype attribuut aan elk anker dat naar een afbeelding linkt?
Image Link
En daarmee haak ter plekke kunnen we een standaard attributen selector gebruiken om alleen die ankers te targeten.
a [data-filetype = "image"] color: red;
Demo bekijken
a [data-info ~ = "extern"] kleur: rood; a [data-info ~ = "image"] border: 1px effen zwart;
Hier is een speciale die indruk zal maken op je vrienden. Niet te veel mensen weten van deze truc. De tilda (~) -symbool stelt ons in staat om een kenmerk te targeten dat een door spaties gescheiden lijst met waarden heeft.
In overeenstemming met ons aangepaste kenmerk van nummer vijftien hierboven, kunnen we een data-info attribuut, dat een door spaties gescheiden lijst kan ontvangen van alles wat we nodig hebben om te noteren. In dit geval noteren we externe links en links naar afbeeldingen - alleen voor het voorbeeld.
"Click Me, Fool
Met die markeringen op zijn plaats, kunnen we nu alle tags met een van deze waarden targeten, door de truc voor de attributen van de ~ attributen te gebruiken.
/ * Target data-info attr dat de waarde "external" bevat * / a [data-info ~ = "external"] color: red; / * En die de waarde "image" bevatten * / a [data-info ~ = "image"] border: 1px effen zwart;
Behoorlijk handig, ay?
Demo bekijken
invoer [type = radio]: aangevinkt rand: 1px effen zwart;
Deze pseudo-klasse zal alleen een element van de gebruikersinterface targeten dat is geweest gecontroleerd - zoals een keuzerondje of selectievakje. Zo simpel is het.
Demo bekijken
De voor en na pseudo klassen kick butt. Het lijkt erop dat mensen elke dag nieuwe en creatieve manieren vinden om ze effectief te gebruiken. Ze genereren eenvoudig inhoud rond het geselecteerde element.
Velen werden voor het eerst aan deze lessen voorgesteld toen ze de clear-fix hack tegenkwamen.
.clearfix: na content: ""; weergave: blok; beiden opschonen; zichtbaarheid: verborgen; lettergrootte: 0; hoogte: 0; .clearfix * display: inline-block; _hoogte: 1%;
Deze houwen gebruikt de :na pseudo-klasse om een spatie achter het element toe te voegen en vervolgens te wissen. Het is een uitstekende truc om in je gereedschapstas te hebben, vooral in de gevallen waarin het overloop verborgen; methode is niet mogelijk.
Voor een ander creatief gebruik hiervan, verwijs ik naar mijn snelle tip over het maken van schaduwen.
Volgens de specificatie CSS3 Selectors moet u de syntaxis van het pseudo-element van twee dubbele punten technisch gebruiken
::. Om compatibel te blijven, accepteert de user-agent echter ook een enkel colongebruik. In feite is het op dit moment slimmer om de versie met één dubbele punt in uw projecten te gebruiken.
div: hover background: # e3e3e3;
Oh kom op. Je kent deze. De officiële term hiervoor is gebruikersactie pseudo-klasse. Het klinkt verwarrend, maar dat is het echt niet. Wilt u een specifieke stijl toepassen wanneer een gebruiker over een element zweeft? Dit zal de klus klaren!
Houd er rekening mee dat de oudere versie van Internet Explorer niet reageert wanneer de
: hoverpseudo-klasse wordt toegepast op iets anders dan een ankertag.
U gebruikt deze selector meestal voor het toepassen van bijvoorbeeld a border-bottom om tags te verankeren, wanneer u erboven zweeft.
a: hover border-bottom: 1px solid black;
Pro-tip -
border-bottom: 1px effen zwart;ziet er beter uit dantekstdecoratie: onderstrepen;.
div: not (#container) color: blue;
De ontkenning pseudoklasse is bijzonder nuttig. Laten we zeggen dat ik alle divs wil selecteren, behalve degene met een ID kaart van houder. Het bovenstaande fragment zal die taak perfect verwerken.
Of, als ik elk afzonderlijk element (niet geadviseerd) wilde selecteren, behalve alinea-tags, zouden we kunnen doen:
*: niet (p) kleur: groen;
Demo bekijken
p :: eerste regel font-weight: bold; lettergrootte: 1.2em;
We kunnen pseudo-elementen gebruiken (aangeduid door ::) om fragmenten van een element te stijlen, zoals de eerste regel of de eerste letter. Houd er rekening mee dat deze moeten worden toegepast op blokniveau-elementen om effect te kunnen hebben.
Een pseudo-element bestaat uit twee dubbele punten:
::
p :: eerste letter float: links; font-size: 2em; lettertype: vet; lettertype-familie: cursief; opvulling rechts: 2px;
Dit fragment is een abstractie die alle alinea's op de pagina zal vinden en vervolgens alleen de eerste letter van dat element sub-target.
Dit wordt meestal gebruikt om een krantachtige vormgeving te maken voor de eerste letter van een artikel.
p :: eerste regel font-weight: bold; lettergrootte: 1.2em;
Evenzo is de ::Eerste lijn pseudo element zal, zoals verwacht, de eerste regel van het element alleen stylen.
"Voor compatibiliteit met bestaande stijlbladen moeten user agents ook de vorige eenkolomsnotatie accepteren voor pseudo-elementen die zijn geïntroduceerd in CSS-niveaus 1 en 2 (namelijk: eerste regel,: eerste letter,: before en: after). Deze compatibiliteit is niet toegestaan voor de nieuwe pseudo-elementen die in deze specificatie zijn geïntroduceerd. " - Bron
Demo bekijken
li: nth-child (3) color: red;
Weet je nog de dagen dat we geen specifieke elementen in een stapel konden targeten? De n-kind pseudoklasse lost dat op!
Houd er rekening mee dat n-kind accepteert een geheel getal als parameter, maar dit is niet gebaseerd op nul. Als u het tweede lijstitem wilt targeten, gebruikt u li: n-kind (2).
We kunnen dit zelfs gebruiken om een variabele reeks kinderen te selecteren. We zouden het bijvoorbeeld kunnen doen li: n-kind (4N) om elk vierde lijstitem te selecteren.
Demo bekijken
li: nth-last-child (2) color: red;
Wat als je een enorme lijst met items in een ul, en hoefde je alleen het derde tot het laatste item te openen? In plaats van te doen li: n-kind (397), je zou in plaats daarvan de n-last-kind pseudoklasse.
Deze techniek werkt vrijwel identiek vanaf nummer zestien, maar het verschil is dat het begint aan het einde van de verzameling en op zijn weg terug werkt.
Demo bekijken
ul: nth-of-type (3) rand: 1px effen zwart;
Er zullen tijden zijn waarin, in plaats van het selecteren van een kind, u moet in plaats daarvan selecteren volgens de type van element.
Stel je voor een opmaak die vijf ongeordende lijsten bevat. Als je alleen de derde wilt stylen ul, en had geen uniek ID kaart om in te haken, zou je het kunnen gebruiken n-of-type (n) pseudoklasse. In het bovenstaande fragment, alleen de derde ul zal een rand eromheen hebben.
Demo bekijken
ul: n-de-laatste-van-type (3) rand: 1px effen zwart;
En ja, om consistent te blijven, kunnen we ook gebruiken n-laatste-of-type om aan het einde van de selectorslijst te beginnen en werk terug om het gewenste element te targeten.
ul li: first-child border-top: none;
Deze structurele pseudo-klasse stelt ons in staat om alleen het eerste kind van de ouder van het element te targeten. U gebruikt dit vaak om randen van de eerste en laatste lijstitems te verwijderen.
Stel dat u een lijst met rijen hebt en elke rij heeft een border-top en een border-bottom. Welnu, met die opstelling zal het eerste en laatste item in die set er een beetje vreemd uitzien.
Veel ontwerpers passen klassen toe van eerste en laatste om dit te compenseren. In plaats daarvan kunt u deze pseudo-klassen gebruiken.
Demo bekijken
ul> li: laatste kind kleur: groen;
Het tegenovergestelde van eerstgeborene, laatste kind zal het laatste item van het bovenliggende element van het element targeten.
Laten we een eenvoudig voorbeeld bouwen om een mogelijk gebruik van deze klassen te demonstreren. We zullen een opgemaakt lijstitem maken.
Niets bijzonders hier; gewoon een simpele lijst.
ul width: 200px; achtergrond: # 292929; kleur wit; lijststijl: geen; opvulling links: 0; li opvulling: 10px; border-bottom: 1px effen zwart; border-top: 1px solid # 3c3c3c;
Deze stijl zet een achtergrond, verwijdert de standaard vulling van de browser op de ul, en grenzen aan elk toepassen li om een beetje diepte te geven.
Voeg a toe om diepte aan uw lijsten toe te voegen
border-bottomvoor elklidat is een schaduw of twee donkerder dan delide achtergrondkleur. Stel vervolgens eenborder-topwat een paar kleuren is aansteker.
Het enige probleem, zoals weergegeven in de bovenstaande afbeelding, is dat een rand wordt toegepast op de top en onderkant van de ongeordende lijst - wat vreemd lijkt. Laten we de gebruiken :eerstgeborene en :laatste kind pseudo klassen om dit te repareren.
li: first-child border-top: none; li: last-child border-bottom: none;
Daar gaan we; dat lost het op!
Demo bekijken
Ja - IE8 ondersteund :eerstgeborene, maar niet :laatste kind. Ga figuur.
div p: only-child color: red;
Eerlijk gezegd, zult u waarschijnlijk niet merken dat u de enig kind pseudo-klasse te vaak. Desalniettemin is het beschikbaar, mocht u het nodig hebben.
Hiermee kunt u elementen targeten die de enkel en alleen kind van de ouder. Bijvoorbeeld, verwijzend naar het bovenstaande fragment, alleen de alinea die het enige kind is van de div wordt gekleurd, rood.
Laten we de volgende markup aannemen.
Mijn paragraaf hier.
Twee alinea's totaal.
Twee alinea's totaal.
In dit geval de tweede divparagrafen worden niet getarget; alleen de eerste div. Zodra u meer dan één kind op een element toepast, wordt het enig kind pseudo klasse houdt op effect te hebben.
Demo bekijken
li: only-of-type font-weight: bold;
Deze structurele pseudoklasse kan op een aantal slimme manieren worden gebruikt. Het zal zich richten op elementen die geen broers of zussen hebben in de bovenliggende container. Laten we bijvoorbeeld iedereen targeten uls, die slechts één item uit de lijst hebben.
Vraag jezelf eerst af hoe je deze taak zou volbrengen? Je zou kunnen doen ul li, maar dit zou het doelwit zijn allemaal lijst items. De enige oplossing is om te gebruiken alleen-of-type.
ul> li: alleen-van-type font-weight: bold;
Demo bekijken
De eerste-van-type Met pseudo-klasse kunt u de eerste broers en zussen van dit type selecteren.
Laten we een test hebben om dit beter te begrijpen. Kopieer de volgende mark-up naar uw code-editor:
Mijn paragraaf hier.
- Lijst Item 1
- Lijstitem 2
- Lijstitem 3
- Lijst Item 4
Probeer nu, zonder verder te lezen, uit te zoeken hoe je alleen kunt targeten "Lijstitem 2". Als je het uit hebt gevonden (of hebt opgegeven), lees dan verder.
Er zijn verschillende manieren om deze test op te lossen. We zullen een handvol van hen beoordelen. Laten we beginnen met gebruiken eerste-van-type.
ul: first-of-type> li: nth-child (2) font-weight: bold;
Dit fragment zegt in feite: "vind de eerste ongeordende lijst op de pagina en vind dan alleen de directe kinderen, die lijstitems zijn. Filter dat vervolgens alleen naar het tweede lijstitem in die reeks.
Een andere optie is om de aangrenzende selector te gebruiken.
p + ul li: last-child font-weight: bold;
In dit scenario vinden we de ul die onmiddellijk de p tag en zoek vervolgens het allerlaatste kind van het element.
We kunnen net zo onaangenaam of zo speels zijn als we willen met deze selectors.
ul: first-of-type li: nth-last-child (1) font-weight: bold;
Deze keer pakken we de eerste ul op de pagina en zoek dan het allereerste lijstitem, maar begin onderaan! :)
Demo bekijken
Als u oudere browsers, zoals Internet Explorer 6, compenseert, moet u nog steeds voorzichtig zijn bij het gebruik van deze nieuwere selectors. Maar laat dat je alsjeblieft niet ervan weerhouden om dit te leren. Je zou jezelf een enorme slechte dienst bewijzen. Zorg ervoor dat u hier verwijst naar een lijst met compatibele browsers. U kunt ook het uitstekende IE9.js-script van Dean Edward gebruiken om ondersteuning te bieden voor deze selectors voor oudere browsers.
Ten tweede, wanneer u werkt met JavaScript-bibliotheken, zoals het populaire jQuery, probeer deze native CSS3-selectors altijd te gebruiken via de aangepaste methoden / selectors van de bibliotheek, indien mogelijk. Het maakt je code sneller, omdat de selector-engine de native parsing van de browser kan gebruiken in plaats van die van de eigen.
Het is geweldig dat u tijd besteedt aan het leren van fundamentals voor webontwerp, maar als u een snelle oplossing nodig hebt, is een van onze gebruiksklare CSS-sjablonen een goede optie. We hebben ook enkele premium CSS-items die u kunt overwegen:
Hier zijn een handvol van de kant-en-klare? CSS-code-items op Envato Market die u misschien handig vindt.
Dit Mega Drop Down Menu is een flexibele en eenvoudig te integreren oplossing om uw eigen menu's samen te stellen. De vervolgkeuzelijst is alleen afhankelijk van CSS / XHTML en wordt geleverd met een volledig werkend contactformulier.
CSS3 Mega vervolgkeuzemenuCSS3 Responsive Web Pricing Tables Grids is een pakket van pure CSS3, responsieve en retina-ready Pricing Tables. De sjabloon wordt geleverd met 2 tabelstijlen, 20 voorgedefinieerde kleuren skins, geanimeerde zweeftoestanden, mogelijkheid om één of meerdere kolommen in te stellen als standaard actief (popped-up), CSS3-linten, tooltips van CSS3, 20 op lettertype gebaseerde ja / nee-pictogrammen.
Deze versie is speciaal bedoeld voor elke aangepaste CMS-site en voor niet-CMS-sites en werkt met rechte HTML- of PHP-websites.
CSS3 Responsive Web Pricing Tabellen GridsDe tooltip is een knappe, moderne heer die verschijnt als het showtime is. De functies zijn onder meer:
De knopinfoMegaNavbar is een pure HTML5 / CSS3-navigatiecomponent, die de standaard navbar-markup en de systeemklassen voor het vloeistofraster van Bootstrap 3 gebruikt. Het werkt voor vaste en responsieve lay-outs en heeft de mogelijkheid om andere Bootstrap-componenten op te nemen. MegaNavbar is compatibel met mobiele apparaten en moderne webbrowsers.
MegaNavbar (v 2.2.0). Geavanceerd megamenu voor Bootstrap 3.0+Dit pack ofяCSS3 Pricing Tablesя is een complete oplossing voor het bouwen van geweldige tafels in minuten. Het wordt geleverd met 6 kleurvarianten en 2 tafelvarianten (licht of donker).
Responsieve CSS3-prijsstellingstabellen
Accentsconagua