Het onderstaande voorbeeld werkt niet:

De paragraaf en daarin vet element, en hier is het van plan element.

Hier vet En benadrukt elementen, meer van plan.

Een meer reëel voorbeeld

Laten we eens kijken hoe de aangrenzende selector werkt aan de hand van een realistischer voorbeeld. In grote artikelen met verschillende secties gemarkeerd met tags

, is het raadzaam om de bovenmarge te vergroten (margin-top eigenschap). Een inspringing van 30px maakt de tekst leesbaar. Maar als het label

komt onmiddellijk daarna

, en dit kan aan het begin van het artikel zijn, het bovenste streepje boven de tag

overbodig zal zijn. Dit probleem kan worden opgelost met behulp van een aangrenzende elementselector.

Hier is de html-code met een voorbeeld van hoe de aangrenzende elementselector werkt.

Hallo!

Rubriek h2

Rubriek h2

De tekst van de paragraaf gaat over ongelooflijke avonturen.

Rubriek h2

De tekst van de paragraaf gaat over ongelooflijke avonturen.

Rubriek h2

De tekst van de paragraaf gaat over ongelooflijke avonturen.

Met behulp van het aangrenzende selectiegereedschap is het ook handig om de inspringing tussen de kop en de eerste alinea van de sectie aan te passen. In ons voorbeeld zijn dit tags

En

Het is ook vermeldenswaard dat het handig is om negatieve waarden te gebruiken om de inspringingen te verkleinen.

Hallo!

Rubriek h2

De tekst van de paragraaf gaat over ongelooflijke avonturen.

Rubriek h2

De tekst van de paragraaf gaat over ongelooflijke avonturen.

Rubriek h2

De tekst van de paragraaf gaat over ongelooflijke avonturen.

Rubriek h2

De tekst van de paragraaf gaat over ongelooflijke avonturen.

Nu een voorbeeld van hoe u een aangrenzende selector kunt gebruiken om alle elementen van de lijst te selecteren, behalve de eerste.

• Lijstitem #1.
• Lijstitem #2.
• Lijstitem #3.
• Lijstitem #4.

Dit is wat er zal gebeuren als resultaat van dit voorbeeld:

Figuur 1. Voorbeeld nr. 5 op het werk.

Hallo, lieve lezers! We gaan verder met het onderwerp CSS-selectors en vandaag zal ik proberen duidelijk uit te leggen wat ze zijn aangrenzende CSS-selectors, en welke rol speelt het ook? universele keuzeschakelaar. Kennis van het mechanisme voor het gebruik van alle soorten CSS-tools stelt u in staat een optimale en compacte inhoud van het document te bereiken waarin elementstijlen worden beschreven, wat een van de componenten is van succesvolle promotie van uw bron, dus verwaarloos in geen geval de mogelijkheid om nuttige informatie verkrijgen over het concept van een selector en de verschillende typen ervan.

Als u de publicaties onthoudt en zorgvuldig volgt, zijn er al veel soorten selectors overwogen; ; . Nogmaals, ik dring er bij u op aan om het leren van de basisprincipes van CSS niet te verwaarlozen, aangezien dit u in de toekomst veel voordelen zal opleveren.

Universele keuzeschakelaar

Laten we nu direct naar de essentie van de publicatie van vandaag gaan. Wat de universele selector betreft, deze is vrij eenvoudig, dus ik zal er niet lang bij stilstaan. De syntaxis voor het schrijven van een CSS-regel die een universele selector gebruikt, is als volgt:

Hier betekent de operator “*” dat we een universele selector hebben. Het wordt gebruikt wanneer het nodig is om één stijl in te stellen voor alle elementen op een webpagina. Soms is een universele selector niet nodig. De invoer .*class en .class zijn in deze gevallen bijvoorbeeld volledig identiek. Nu zeker een voorbeeld. Meestal is de meest gebruikelijke manier het definiëren van een consistent lettertype, grootte en kleur, en plaatsing van gewone tekst op een blog of websitepagina.

* ( lettertypefamilie: Tahoma, Arial, Helvetica, sans-serif; /* Tekstlettertype */ kleur: #646464; /* Tekstkleur */ lettergrootte: 75%; /* Tekstgrootte */ tekstuitlijning: links; /* Tekstlocatie */ )

Op deze manier kunt u het tekstontwerp definiëren voor alle elementen die zich op de pagina bevinden. Merk op dat in dit geval het resultaat vergelijkbaar zal zijn als u, in plaats van een universele selector, de naam van de body-tag gebruikt, die de tags van alle elementen bevat.

Aangrenzende CSS-kiezers

Laten we nu wat meer tijd besteden aan de aangrenzende selectors. Elementen op een webpagina worden als aangrenzend gedefinieerd als ze direct naast elkaar verschijnen in de documentcode. In dit geval ziet de syntaxis van CSS-stijlen er als volgt uit:

Neem nu een alinea tekst gedefinieerd door de p-tag, die de b-, i- en big-tags als onderliggende elementen bevat, die de opmaak van de tekst definiëren, respectievelijk vet, cursief en vergroot lettertype:

Deze paragraaf maakt gebruik van label b, tag ik, groot label.

En met behulp van de CSS- en HTML-bewerkingstool, die is ingebouwd in de nieuwste versies van alle populaire browsers (,) en die analoog is aan de beroemde Firefox-browserplug-in (), zullen we deze paragraaf overal op absoluut elke webpagina invoegen (ik deed het goed op pagina van het vorige artikel, eerste paragraaf). Deze tool wordt bijvoorbeeld in Chrome opgeroepen door simpelweg op de F12-toets te drukken. Het kan worden gebruikt voor praktische versterking van het materiaal in de secties “HTML Basics” en “CSS Tutorial”. Dus ik voeg een stukje tekst in als eerste alinea:

Deze paragraaf zal experimenteel zijn en aan de hand van het voorbeeld zullen we de toepassing ervan bekijken aangrenzende selectors. Zoals ik al zei, zijn de b-, i- en big-tags kinderen van de p-paragraaftag, omdat ze allemaal direct in de p-container staan. Hier zijn de aangrenzende tags b en i, evenals i en big. Laten we nu de CSS-regel toepassen op aangrenzende selectors:

B+i (kleur: rood;) i+groot (kleur: groen;)

Nadat deze stijlen zijn toegepast, ziet de alinea er als volgt uit:

Dit geldt voor alle webpaginatags die de b-, i- en big-elementen bevatten. Bovendien moeten b en i, i en big in de buurt zijn; andere combinaties zullen deze CSS-regel niet werken. Ik denk dat het je nu duidelijk is hoe aangrenzende selectors worden gebruikt bij het schrijven of bewerken van een CSS-document. Nog een zeer belangrijke opmerking: als het je is opgevallen, wordt de opgegeven stijl in het geval van aangrenzende elementen alleen op het tweede element toegepast.

Het besproken voorbeeld met een paragraaf is heel duidelijk en zorgt ervoor dat je snel de essentie van aangrenzende selectors in CSS begrijpt. In de praktijk worden echter meestal andere toepassingsgebieden van aangrenzende selectors gebruikt. Het is bijvoorbeeld heel vaak nodig om een ​​stukje tekst in de hoofdtekst van een artikel op te nemen, vooral in de vorm van voetnoten, aantekeningen, enz.

Voor deze doeleinden maken ze meestal een aparte klasse en passen deze toe op de gewenste paragraaf. Maar een veel optimalere manier is om aangrenzende selectors te gebruiken. Op mijn blog zijn er bijvoorbeeld stijlen gemaakt om een ​​gewone h3-header te stylen.

H3 ( lettergrootte: 1,7em; /* Lettergrootte */ tekstuitlijning: gecentreerd; /* Tekstplaatsing */ lettertypegewicht: normaal; /* Normaal tekstgewicht */ lettertypefamilie: Tahoma, Arial, Helvetica, schreefloos; /* Lettertype */ kleur: #646464; /* Tekstkleur */ )

Om de titel van een notitie of voetnoot te markeren, definiëren we een speciale klasse, bijvoorbeeld:

H3.put ( kleur: rood; /* Tekstkleur */ marge-links: 5px; /* Linker opvulling */ marge-boven: 0.5em; /* Bovenste opvulling */ opvulling: 10px; /* Marges rond tekst */ tekst uitlijnen: links; /* Tekstlocatie */ )

Laten we nu de aangrenzende selectors gebruiken om een ​​speciale stijl voor de voetnootparagraaf te maken. Deze paragraaf wordt direct onder de kop geplaatst met de stijl "h3.put":

H3.put+p ( achtergrond: #ffefd5; /* Achtergrondkleur */ marge-links: 15px; /* Linker opvulling */ marge-rechts: 120px; /* Rechter opvulling */ marge-boven: 0.5em; /* Opvulling bovenaan */ opvulling: 5px /* Marges rond tekst */ )

Opnieuw met behulp van de Google Chrome-bewerkingstool, waar ik je mee heb beziggehouden (maar het is de moeite waard), voeren we de titel voor de voetnoot in, en niet te vergeten de put-klasse ervoor te plaatsen:

Aandacht!

Vervolgens schrijven we de tekst van de voetnoot zelf:

De materialen die in deze publicatie worden gepresenteerd zijn erg belangrijk als het gaat om het leren van de basisprincipes van CSS (Cascading Style Sheets)

.

Na al deze bewegingen krijgen we de volgende voetnootparagraaf op de webpagina (ik herinner u eraan dat ik deze paragraaf heb ingevoegd aan het einde van mijn vorige artikel over kind- en contextselectors):

Wanneer u op een blog of website de klasse “put” aan een h3-tag koppelt, verschijnt zo’n voetnoot op de webpagina. Bovendien wordt alleen de eerste alinea na de h3-tag met “class=“put”” op een speciale manier opgemaakt. Maar dat is precies wat we wilden, toch?

Hiermee wil ik de handleiding van vandaag afsluiten, waarin een algoritme werd gegeven voor het gebruik van aangrenzende en ook universele selectors. Ik hoop dat dit artikel u, beste lezers, zal aanmoedigen om u te abonneren

Gegroet, beste lezers. In eerdere artikelen hebben we voornamelijk CSS-stijlkenmerken bestudeerd. Er zijn er veel. Sommigen stellen de lettertypeparameters in, anderen de achtergrondparameters en weer anderen de parameters voor inspringingen en kaders.

In dit artikel zullen we het hebben over stijlkiezers. In een van de artikelen waar we het al over hadden. Vandaag zullen we nog een aantal typen selectors bekijken die een stijlregel niet expliciet aan een webpagina-element binden. Dit zijn zogenaamde speciale selectors. Er zijn verschillende soorten.

Combinatoren in CSS (aangrenzende, onderliggende en contextkiezers)

Combinatoren zijn een type CSS-selectors die een stijlregel aan een webpagina-element binden op basis van de locatie ten opzichte van andere elementen.

Eerste combinatorsymbool plus(+) of aangrenzende keuzeschakelaar. Plus wordt ingesteld tussen twee selectors:

<селектор 1> + <селектор 2> { <стиль> }

De stijl wordt in dit geval toegepast keuzeschakelaar 2, maar alleen als het grenst aan keuzeschakelaar 1 en komt er vlak achteraan. Laten we eens kijken naar een voorbeeld:

sterk + ik (

}
...

Dit is normale tekst. Dit is vetgedrukte tekst, platte tekst, rode tekst

Dit is normale tekst. Dit is vetgedrukte tekst, platte tekst, en dit is normale tekst.

Resultaat:

De stijl die in het voorbeeld wordt beschreven, wordt alleen toegepast op de eerste tekst die in de tag is ingesloten , omdat het komt onmiddellijk na de tag .

Combinator tilde(~) is ook van toepassing op aangrenzende selectors, maar deze keer kunnen er andere elementen tussen zitten. In dit geval moeten beide selectors in dezelfde bovenliggende tag zijn genest:

<селектор 1> ~ <селектор 2> { <стиль> }

De stijl wordt toegepast keuzeschakelaar 2 die zou moeten volgen keuzeschakelaar 1. Beschouw een voorbeeld:

sterk~ik(
kleur:rood; /* Rode tekstkleur */
}
...

Dit is normale tekst. Dit is vetgedrukte tekst, platte tekst, rode tekst de aangrenzende selectieregel is erop toegepast.

Dit is normale tekst. Dit is vetgedrukte tekst, platte tekst, en dit is rode tekst.

Resultaat:

Zoals u kunt zien, werkte de stijlregel deze keer voor beide teksten in de tag , ondanks het feit dat in het tweede geval tussen de tag En het label waard .

Combinator > verwijst naar kinderkiezers. Hiermee kunt u de CSS-stijl koppelen aan een webpagina-element dat direct in een ander element is genest:

<селектор 1> > <селектор 2> { <стиль> }

Stijl aan zal worden gebonden keuzeschakelaar 2, die direct is genest keuzeschakelaar 1.

div > sterk (

}
...

Dit is normale tekst. Dit is vet cursieve tekst.

Dit is normale tekst. En dit is gewone vetgedrukte tekst.

En het resultaat:

Zoals u in de afbeelding kunt zien, had de stijlregel alleen invloed op de eerste tag , die rechtstreeks in de tag is genest

. En de directe ouder van de tweede tag is het etiket

, dus de regel is niet op hem van toepassing.

Vervolgens zullen we kijken contextkiezer<пробел> . Hiermee kunt u een CSS-stijl koppelen aan een element dat is genest in een ander element, en er kan elk niveau van nesten zijn:

<селектор 1> <селектор 2> { <стиль> }

De stijl wordt toegepast keuzeschakelaar 2, als het op de een of andere manier is ingebed keuzeschakelaar 1.

Laten we naar het vorige voorbeeld kijken. Bij het beschrijven van een CSS-regel gebruiken we alleen de contextselector:

div sterk(
lettertype: cursief /* cursief */
}
...

Dit is normale tekst. Dit is vet cursieve tekst.

Dit is normale tekst. En dit is ook cursief vetgedrukte tekst.

Platte tekst en gewoon vetgedrukte tekst

Resultaat:

Zoals u kunt zien, had de regel deze keer invloed op beide tags , zelfs degene die in de container is genest

en in een alinea

. Om te taggen , die eenvoudigweg in een alinea is genest

De CSS-regel werkt helemaal niet.

Selectors op tagattributen

Attribuutselectors zijn speciale selectors die een stijl aan een element binden op basis van de vraag of het een bepaald attribuut bevat of een bepaalde waarde heeft. Er zijn verschillende opties voor het gebruik van dergelijke selectors.

1. Eenvoudige attribuutkiezer

Lijkt op:

<селектор>[<имя атрибута тега>] { <стиль> }

En bindt de stijl aan die elementen waarbinnen het opgegeven attribuut wordt toegevoegd. Bijvoorbeeld:

sterk(
kleur:rood;
}
...

Auto dit is een mechanische motor zonder spoor wegvoertuig met minimaal 4 wielen.

Resultaat:

In de afbeelding kun je zien dat de css-regel (rode tekstkleur) op het element is toegepast sterk, waaraan het attribuut wordt toegevoegd titel.

2. Attribuutkiezer met waarde

De syntaxis voor deze selector is als volgt:

<селектор>[<имя атрибута тега>=<значение>] { <стиль> }

Bindt stijl naar elementen waarvan de tags een attribuut hebben met het opgegeven kenmerk naam En betekenis. Voorbeeld:

A(
kleur:rood;
lettergrootte: 150%;
}
...
.ru" target="_blank">Link in nieuw venster

Resultaat:

Zoals u kunt zien, hebben beide elementen van het hyperlinktype het attribuut doel, maar op de tag wordt de css-regel toegepast die de linktekst anderhalf keer vergroot en van kleur verandert in rood wiens attribuut doel zaken "_blank".

3. Een van de verschillende attribuutwaarden

Sommige attribuutwaarden kunnen worden gescheiden door spaties, zoals klassenamen. Om een ​​stijlregel in te stellen wanneer de vereiste waarde aanwezig is in de lijst met attribuutwaarden, gebruikt u de volgende selector:

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

De stijl wordt toegepast als het attribuut de vereiste waarde heeft of deel uitmaakt van een door spaties gescheiden lijst met waarden. Bijvoorbeeld:

{
kleur:rood;
lettergrootte: 150%;
}
...

Onze telefoon: 777-77-77

Ons adres: Moskou st. Sovetskaja 5

U krijgt het volgende resultaat:

De regel is van toepassing op een element waarvan de attribuutwaarden het volgende omvatten: klas er is een betekenis tel.

4. Koppelteken in attribuutwaarde

Een koppelteken is toegestaan ​​in identificatie- en klassewaarden. Om een ​​stijl te binden aan elementen waarvan de attribuutwaarden een koppelteken kunnen bevatten, kun je de volgende constructie gebruiken:

[attribuut|="waarde"] ( stijl )
Selector[attribuut|="waarde"] ( stijl )

De stijl wordt toegepast op de elementen waarvan de attribuutwaarde begint met de opgegeven waarde, gevolgd door een koppelteken. Bijvoorbeeld:

{
kleur:rood;
lettergrootte: 150%;
}
...

• Punt 1


• Punt 2


• Punt 3


• Punt 4

Resultaat:

In het voorbeeld is de stijlregel alleen van toepassing op die lijstelementen waarvan de klassenaam begint met waarde "menu- „.

5. De attribuutwaarde begint met specifieke tekst

Deze selector stelt de stijl voor een element in als de tagattribuutwaarde begint met een specifieke waarde. Er kunnen twee opties zijn:

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

In het eerste geval stijl is van toepassing op alle elementen waarvan de tags een attribuut hebben met het opgegeven kenmerk naam en een waarde die begint met de opgegeven waarde subtekenreeksen. In het tweede geval hetzelfde, alleen voor bepaalde elementen gespecificeerd in hoofdkiezer. Voorbeeld:

A(
kleur:groen;
lettertypegewicht:vet;
}
...

Resultaat:

Het voorbeeld laat zien hoe u externe links en interne links verschillend kunt weergeven. Externe links beginnen altijd met de string "http://". Daarom geven we in de selector aan dat de stijl alleen wordt toegepast op koppelingen die het attribuut hebben href begint met betekenis http://.

6. De attribuutwaarde eindigt met een bepaalde tekst

Bindt een stijl aan elementen waarvan de attribuutwaarde eindigt met de opgegeven tekst. Heeft de volgende syntaxis:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

In het eerste geval stijl geldt voor alle elementen die dat wel hebben attribuut met de opgegeven naam en heeft een betekenis die eindigt op het opgegeven subtekenreeks. In het tweede geval hetzelfde, alleen voor het aangegeven kiezers. Op deze manier kunnen bijvoorbeeld verschillende grafische beeldformaten verschillend worden weergegeven. Bijvoorbeeld:

IMG (
rand: 5px effen rood;
}
...

GIF-afbeelding

Beeldformaat png

Resultaat:

In het voorbeeld worden alle afbeeldingen met een gif-extensie weergegeven met een rode rand van vijf pixels dik.

7. De attribuutwaarde bevat de opgegeven tekenreeks

Deze selector koppelt een stijl aan tags waarvan de attribuutwaarde specifieke tekst bevat. Syntaxis:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

Stijl bindt aan elementen die dat wel hebben attribuut met de opgegeven naam en de waarde ervan bevat het opgegeven subtekenreeks. Bijvoorbeeld:

IMG (
rand: 5px effen rood;
}
...

Afbeelding uit de galerijmap

Afbeelding uit een andere map

Resultaat:

In het voorbeeld wordt de stijl toegepast op afbeeldingen die vanuit de map worden geladen "galerij".

Dat gaat allemaal over attribuutkiezers. Alle bovenstaande methoden kunnen met elkaar worden gecombineerd:

Selector[attribute1="waarde1"][attribute2="waarde2"] ( stijl )

Laat me u bovendien herinneren aan speciale CSS-selectors:

• met behulp van de symbolen “+” en “~” worden gevormd;
• het ">" symbool bindt CSS-stijlen aan dochterondernemingen labels;
• symbool<пробел>genereert contextselectors.

In toekomstige artikelen zullen we ook kijken naar pseudo-elementen en pseudo-klassen, die krachtige hulpmiddelen voor stijlbeheer bieden.

Dat is alles, tot ziens.