Op het eerste gezicht is er geen verschil wat te gebruiken: id of class. Immers, hetzelfde hebben toegewezen CSS-opties stijlen voor id en klasse - het resultaat zal identiek zijn. In feite zijn er vrijwel geen verschillen tussen id en class in CSS, behalve de prioriteit van hun verwerking. Maar in sommige andere gevallen, die vaak worden gebruikt bij webontwikkeling, is het verschil behoorlijk merkbaar. Dit artikel belicht alle verschillen tussen klasse en id.

Identiteitskaart

Id is de unieke identificatie van het element. Op één pagina wordt één identifier slechts één keer gebruikt, hoewel het mogelijk is om meerdere identieke identifiers binnen dezelfde pagina te gebruiken, maar dit kan problemen veroorzaken bij het gebruik van HTML-ankers en JS. Als u twee verschillende ID's aan één element (HTML-tag) probeert toe te wijzen, werken alleen de regels van de eerste (meest linkse) ID

Voorbeeld 1: waarom het niet raadzaam is om identifiers (ID’s) te gebruiken

Geselecteerd tekstblok

Geselecteerd tekstblok

Voorbeeld 2: hoe u geen identificatiegegevens (ID's) gebruikt

Het toekennen van twee of meer ID's aan het eerste element is niet toegestaan

In het geval van gelijktijdige toepassing van id en klasse op één element, zal de prioriteit van ID hoger zijn dan die van klasse:

Definitie CSS-stijlen

#my_id_r7t (kleur: groen; lettertype: vet;)

Aan deze paragraaf wordt een klasse my_class en een identificatie my_id toegewezen.

Zoals u kunt zien, heeft de kleur de waarden verkregen die in de identificatie zijn vastgelegd. Maar als je beter kijkt, kunnen id en class elkaar met succes aanvullen: vetgedrukte tekst, gespecificeerd in de identifier, wordt gecombineerd met de cursieve stijl die in de klas is geschreven.

Als u de stijl: aan de descriptor toevoegt, ziet het resultaat er als volgt uit:

Het meest hoge prioriteit heeft de stijl toegewezen aan de descriptor met behulp van style="...".

Een goed voorbeeld van prioriteiten wordt gegeven in de officiële CSS-documentatie (eng). Kort gezegd zijn de prioriteiten in aflopende volgorde: stijl, id, klasse, tagstijl.

Het id-element kan worden gebruikt als HTML-anker, in plaats van de oudere constructie, zodat u met behulp van Back to Top naar een specifiek deel van de pagina kunt linken zonder deze opnieuw te laden. Als er meerdere identieke ID's op de pagina staan, ontstaat er een dubbelzinnige situatie.

Bij het programmeren van pagina's met JS wordt vaak de functie getElementById() gebruikt, die ook “verwacht” dat de identificatie uniek moet zijn. Anders kunnen er fouten in de code optreden.

Klas

Bij gebruik van class kan aan één HTML-descriptor tegelijkertijd stijlen uit verschillende klassen worden toegewezen:

My_class_r7t (kleur: blauw; lettertype: cursief;)
.my_class_ffR5 (kleur: zwart; achtergrondkleur: #fafafa; opvulling: 3px; rand: 1px effen #757575; marge-links: 30px; )

De namen van verschillende klassen worden gescheiden door spaties geschreven:

Een voorbeeld van het gebruik van 2 verschillende klassen voor 1 HTML-tag.

Het resultaat van het toepassen van twee verschillende klassen op de eerste HTML-descriptor.

De klassen my_class_r7t en my_class_ffR5 stellen verschillende kleuren in voor de inhoud van een HTML-tag. De kleur die later in het stijlbestand wordt gedefinieerd, wordt gebruikt (in in dit geval klasse my_class_ffR5 wordt geschreven na my_class_r7t). De volgorde waarin de klassen in de HTML-descriptor zelf worden toegepast, doet er niet toe.

Om een ​​unieke waarde toe te wijzen aan samengestelde klassen styling, ze worden zonder problemen samen geschreven:

My_class_bbbb755 (lettertype: vet;)
.my_class_ffR5 .my_class_bbbb755 (tekst uitlijnen: rechts;)

Rechtse uitlijning wordt alleen toegepast als aan één HTML-descriptor twee klassen tegelijk worden toegewezen:

Een voorbeeld van het toepassen van stijlen op samengestelde klassen

Zie hieronder hoe het eruit ziet:

Een voorbeeld van het toepassen van stijlen op samengestelde klassen

Dezelfde klasse kan, in tegenstelling tot id, eenvoudig worden toegewezen aan een onbeperkt aantal verschillende elementen:

...
...
...
...
...

Klasse of ID - wat te gebruiken?

In feite kunt u niet kiezen of u class of id wilt gebruiken. Dit is vergelijkbaar met hoe je kiest wat beter is: eten of drinken? Afhankelijk van het doel is het noodzakelijk om zowel klassen als identifiers te gebruiken. In de meeste gevallen is het beter om een ​​klasse te gebruiken om te voorkomen dat een ID per ongeluk meerdere keren op dezelfde pagina wordt gebruikt. Maar waar nodig moet je id gebruiken: een uniek blok van de pagina markeren, voor ankers, voor JS, enz.

Controle verschijning HTML-elementen op een pagina kunnen worden gemaakt met behulp van verschillende selectors. ID- en CSS-klasse zijn de meest voorkomende, die niet alleen helpen bij het maken van HTML-documentopmaak, maar ook bij het ontwerp (styling).

Hoe u een CSS ID-selector gebruikt

De ID-selector wordt gebruikt om een ​​enkel HTML-element aan te duiden met behulp van een unieke id-attribuutwaarde. Het volgende voorbeeld vertegenwoordigt een element waarvan de id-attribuutwaarde header is.

In CSS kun je verschillende stijlen toepassen op dit div-element:

#header ( breedte: 100%; hoogte: 80px; achtergrond: blauw )

Vergeet niet om het #-teken (hashtag) vóór uw naam te gebruiken. Hier en hier kunt u hier meer over lezen.

Hoe de CSS-klassekiezer te gebruiken

De HTML CSS-klassekiezer wordt gebruikt om een ​​individu of een groep HTML-elementen met dezelfde klasse-attribuutwaarde te selecteren.

In CSS kun je verschillende stijlen toepassen op meerdere alinea's:

Inhoud (marge: 20px 0; lijnhoogte: 24px; lettergrootte: 15px)

Vergeet niet het bordje te gebruiken.

(punt) vóór de klassenaam bij het declareren van een CSS-regel. Hier en hier kunt u hier meer over lezen. Hoe zijn ze anders? CSS-klasse

en identiteitskaart De id-kiezer wordt gebruikt voor individuele pagina-elementen (#header), terwijl de klassenkiezer (.content) voor meerdere wordt gebruikt. Omdat de id-waarde aan slechts één HTML-element wordt gegeven. Met andere woorden: meerdere elementen kunnen niet bestaan dezelfde waarde ID binnen één aparte pagina

. U kunt bijvoorbeeld slechts één element met id #header hebben, of één element met id #footer .

Dezelfde klassewaarde kan aan een of meer HTML-elementen worden gegeven. U kunt bijvoorbeeld meerdere alinea's hebben met de klasse .content, of meerdere links met de klasse .external.

Het volgende voorbeeld zal u helpen de verschillen tussen CSS-klasse en id beter te begrijpen en hoe u deze correct kunt gebruiken: Verbinding 1 Verbinding 2 Verbinding 3

Verbinding 4

Dit is onze eerste paragraaf.

Dit is onze tweede paragraaf.

Dit is onze derde paragraaf. We zijn de bovenstaande HTML-opmaak begonnen met een container div-element. We hebben het een ID (#container) gegeven, omdat er maar één container op onze pagina staat. Daarin plaatsen we menu (#menu) en inhoud (#content) secties. Net als bij de container hebben we slechts één menu en één inhoudssectie. Er zijn vier links in het menu

, maar we hebben op elk ervan een CSS-klasse (.link) toegepast. Op dezelfde manier hebben we de klasse (.text) toegepast op elke alinea in het content div-element.

Als u deze elementen wilt opmaken, kunt u het volgende voorbeeld gebruiken:

Wanneer wordt klasse gebruikt en wanneer wordt id gebruikt?

ID wordt gebruikt voor individuele elementen die slechts één keer op de pagina voorkomen. Bijvoorbeeld koptekst, voettekst, menu, etc. De klassenkiezer wordt gebruikt voor een of meer elementen die meerdere keren op een pagina voorkomen. Bijvoorbeeld alinea's, links, knoppen, invoerelementen. En hoewel je er les voor kunt gebruiken individueel onderdeel, maar het is beter om deze selectors te gebruiken voor het beoogde doel.

Houd er ook rekening mee dat een HTML-element zowel een id als een klasse kan hebben. Laten we aannemen dat er twee blokken op de pagina staan ​​met dezelfde grootte en stijl, maar met een verschillende positionering. In dit geval kunt u dezelfde klasse op deze blokken toepassen voor het wijzigen van de grootte en de stijl, en vervolgens een afzonderlijke ID-selector op elk blok gebruiken om ze een andere positionering te geven.

Elementen kunnen ook tegelijkertijd aan meerdere klassen zijn gebonden. Dit is erg handig als u styling wilt toepassen aparte groep elementen bepaald type. Er is bijvoorbeeld een klasse .content die op alle alinea's wordt toegepast. Als u een rand of een andere stilering aan meerdere wilt toevoegen aparte paragrafen, dan kun je dit doen met behulp van de extra CSS p-klasse .bordered :

Dit punt kent geen grenzen.

Dit punt heeft grenzen.

Let op de witte ruimte tussen de twee klassennamen in klasse attribuut tweede paragraaf. Hieronder ziet u een voorbeeld van CSS-code:

Inhoud (marge: 10px; lettergrootte: 15px; kleur: blauw).rand (rand: 2px effen #222)

Het is belangrijk om de id- en CSS-klasse correct te gebruiken, aangezien ze misbruik kan leiden tot fouten bij het weergeven van HTML-code.

De vertaling van het artikel “CSS Class vs ID: Which One to Use” werd voorbereid door het vriendelijke projectteam.

Goed slecht

Tegenwoordig is het moeilijk om een ​​site te vinden waar zo'n noodzakelijke en belangrijk etiket. Kijk naar de code van elke site die u op internet vindt en u zult zien dat de tag vaker voorkomt dan andere tags in een HTML-document. De reden voor deze populariteit is de blokindeling. Met andere woorden: websites zijn ontworpen met behulp van de block-tag.

Dankzij deze tag heeft de volledige HTML-code van het document een visueel en logisch begrijpelijke structuur. Het is niet alleen begrijpelijk voor de lay-outontwerper, maar ook voor andere specialisten die samenwerken aan één project. Een tag zonder zijn “satellieten” – de id- en klassekiezers – is echter waardeloos.

Klassen en ID's

Klassen (class) en identifiers (id) voeren dezelfde taken uit. Ze vragen verschillende stijlen voor de tag zoals in externe CSS bestand en binnen het document, via de stijltag. Hier is het nodig om te verduidelijken dat ze niet alleen in combinatie met de tag werken, maar ook met veel andere tags.

Beschouw de volgende HTML-opmaakcode als voorbeeld: