CSS Selectors. Soorten selectors

blokken in uw code heeft, die elk een specifieke kleur moeten hebben. Hoe dit te doen? De standaard CSS selectors voor tags werken niet, ze specificeren de parameters voor alle blokken tegelijk. De uitgang is eenvoudig. Ken een klas toe aan de elementen. Bijvoorbeeld, de eerste div kreeg klas = 'rood', de tweede div - class = 'blue', de derde klasse = 'groen'. Nu kunnen ze worden geselecteerd met behulp van CSS tabellen.

De syntaxis is: specificeer het punt ("."), Waarna we de naam van de klas schrijven. Gebruik het .red-ontwerp om het eerste blok te bedienen. De tweede is .blauw enzovoort.

Belangrijk! Het is aan te bevelen om duidelijke waarden voor het class attribuut te gebruiken. Een slecht formulier is het gebruik van translit (bijvoorbeeld krasiviy-blok) of willekeurige combinaties van letters / nummers (ojfh834871). In deze code zal je zeker verward worden, om niet te vergeten de moeilijkheden die degenen die het project na te gaan hebben, zullen moeten onder ogen zien. De beste optie is om een soort methodologie te gebruiken, zoals BEM.

Voordelen zijn vrij grote flexibiliteit.

Nadelen - meerdere elementen kunnen dezelfde klasse hebben en daarom worden ze tegelijkertijd bewerkt. Het probleem is opgelost met behulp van de methodologie, evenals de erfenis van preprocessors. Zorg ervoor dat je minder, sass of een andere preprocessor beheert, ze zullen het werk sterk vereenvoudigen.

Selector volgens ID

Met betrekking tot deze optie zijn de meningen van de coder en de programmeurs dubbelzinnig. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Sommige CSS- handboeken raden het algemeen niet aan om ID's te gebruiken, omdat ze per ongeluk erfelijke problemen kunnen veroorzaken. Echter, veel specialisten verspreiden ze actief door de opmaak. Het is aan jou. # »), затем имя блока. De syntaxis is: een roosterkarakter (" # "), dan een bloknaam. #red. Bijvoorbeeld #red.

отличается от класса по нескольким параметрам. De ID verschilt op verschillende manieren van de klas. ID. Ten eerste kunnen er twee identieke ID's op de pagina zijn . Ze krijgen unieke namen toegewezen. Ten tweede heeft een dergelijke keuzer een hogere prioriteit. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Dit betekent dat als u het blok een rode klasse geeft en een rode achtergrondkleur in de CSS- tabellen opgeeft , geef het dezelfde id blauw en geef een blauwe kleur aan, dan wordt het blok blauw.

Voordelen - u kunt een specifiek element beheersen, zonder aandacht te geven aan stijlen voor tags en klassen.

ID и class. Nadelen - het is makkelijk om in veel ID en klasse verward te worden .

Belangrijk! ID вам, в общем-то, не нужны. Als u de BEM-methodologie (of analoge) gebruikt, heeft u over het algemeen geen ID nodig. Deze techniek van lay-out houdt in het gebruik van unieke klassen, die veel handiger is.

Universele selector

{}. Syntaxis: sterreteken ("*") en krullende staven, dat wil zeggen * {}.

Gebruikt om bepaalde attributen tegelijk aan alle elementen van de pagina toe te wijzen. Wanneer kan het handig zijn? box-sizing: border-box. Bijvoorbeeld, als u de paginabepaling van de eigenschap pagina wilt instellen : randvak. div *{}. Het kan gebruikt worden om niet alleen alle componenten van het document te beheren, maar ook om alle kinderen van een bepaald blok te beheersen, bijvoorbeeld div * {}.

Voordelen - u kunt tegelijkertijd een groot aantal items beheren.

Nadelen zijn geen flexibele optie. Bovendien kan het gebruik van deze selector in sommige gevallen de pagina vertragen.

Per attribuut

Het is mogelijk om een element met een specifiek kenmerk te beheren. Bijvoorbeeld, u heeft meerdere invoer labels met een ander type attribuut. Een van hen is tekst, de tweede is wachtwoord, de derde is nummer. Uiteraard kunt u elke klas of ID toewijzen, maar het is niet altijd handig. CSS selectors door attributen maken het mogelijk om waarden voor bepaalde tags met maximale nauwkeurigheid te specificeren. Zo bijvoorbeeld:

Input [type = 'text'] {}

Deze attribuut selecteert alle invoer met het teksttype.

Het gereedschap is vrij flexibel, het kan gebruikt worden met alle tags die attributen kunnen hebben. Maar dat is niet alles! In de CSS-specificatie is het mogelijk om de elementen zelfs met veel gemak te beheren!

Stel je voor dat je pagina een invoer heeft met de attribuut placeholder = "Enter name" en input placeholder = "Wachtwoord invoeren". U kunt ze ook selecteren met behulp van de keuzeschakelaar! De volgende constructie wordt hiervoor gebruikt:

Input [placeholder = "Voer naam"] {} of invoer [placeholder = "Wachtwoord invoeren"]

Flexibeler werk met attributen is mogelijk. Laten we zeggen dat u meerdere tags met vergelijkbare titelkenmerken hebt (bijvoorbeeld Caspian en Caspian). Om beide te selecteren, gebruik de volgende selectors:

[Titel * = "Kaspisch"]

CSS selecteert alle elementen in de titel waarvan er symbolen zijn "Caspian", dat wil zeggen zowel "Caspian" als "Caspian".

U kunt ook tags selecteren waarvan de attributen met bepaalde tekens beginnen:

[Titel ^ = "het teken dat je nodig hebt"] {}

Of eindig met hen:

[Titel $ = "gewenst teken"] {}.

Voordelen - maximale flexibiliteit. U kunt alle bestaande pagina-elementen selecteren zonder op te treden met lessen.

Nadelen - relatief zelden gebruikt, alleen in specifieke gevallen. Veel layout designers hebben de voorkeur aan methodologie, omdat het gemakkelijker is om een klasse te specificeren dan meerdere vierkante haakjes te plaatsen en 'gelijk' te geven. Bovendien werken deze selectors niet in Internet Explorer versie 7 of lager. Maar wie heeft nu de oude Internet Explorer nodig?

Pseudo-class selectors

Een pseudoklasse geeft de toestand van een element aan. Bijvoorbeeld: hover - wat gebeurt er met een gedeelte van de pagina als u hoeft te zwerven: bezochte - bezochte link. Dit omvat elementen zoals: eerste kind en: laatste kind.

Dit type selectors wordt actief gebruikt in een moderne lay-out, omdat dankzij het u de pagina 'live' kunt maken zonder JavaScript te gebruiken. Zo wil je het zo maken dat wanneer je met een btn-cursor over een knop beweegt, de kleur verandert. Om dit te doen gebruiken we de volgende constructie:

.btn: hover {

Achtergrondkleur: rood;

}

Voor schoonheid kunt u de eigenschap van de knop specificeren in de hoofdeigenschappen van deze knop, bijvoorbeeld in 0,5s. In dit geval zal de knop niet onmiddellijk blozen, maar binnen een half seconden.

Voordelen - actief gebruikt om de pagina's 'te herleven'. Makkelijk te gebruiken

Nadelen - zij zijn niet. Dit is echt een handig hulpmiddel. Onervaren redacteurs kunnen echter verward raken in de overvloed aan pseudoklassen. Het probleem is opgelost door studie en praktijk.

Pseudo-element selectors

"Pseudo-elementen" zijn die delen van de pagina die niet in HTML zijn, maar ze kunnen nog steeds worden beheerd. Begrijp je niets? Alles is eenvoudiger dan het lijkt. U wilt bijvoorbeeld de eerste letter in de lijn groot en rood maken, waardoor de andere tekst klein en zwart wordt. Uiteraard kunt u deze brief in span met een bepaalde klas sluiten, maar het is lang en saai. Het is veel makkelijker om de hele paragraaf te selecteren en gebruik het :: eerste letter pseudo-element. Hiermee kunt u het uiterlijk van de eerste letter controleren.

Er is een vrij groot aantal pseudo-elementen. Om ze te vermelden in het kader van een artikel is onwaarschijnlijk dat ze werken. U vindt relevante informatie in uw favoriete zoekmachine.

Voordelen - de mogelijkheid om de uitstraling van de pagina flexibel aan te passen.

Nadelen - beginners in hen zijn vaak verward. Veel selecteurs van dit type werken alleen in bepaalde browsers.

Samenvatten

De keuzer is een krachtig instrument om documentstroom te controleren. Dankzij hem kunt u absoluut elke component van de pagina selecteren (zelfs de bestaande is alleen voorwaardelijk). Zorg ervoor dat u alle beschikbare opties of in ieder geval opschrijft. Dit is vooral belangrijk als u complexe pagina's creëert met een modern design en veel interactieve elementen.