CSS-selectors vormen de ruggengraat van elke stijlvolle webpagina. Ze richten zich op HTML-elementen op uw pagina's, waardoor u stijlen kunt toevoegen op basis van hun ID, klasse, type, attribuut en meer. Deze gids gaat in op de fijne kneepjes van CSS-selectors en hun cruciale rol bij het verbeteren van de esthetiek en gebruikerservaring van uw webpagina's.
Soorten CSS-kiezers
CSS-selectors zijn er in verschillende typen, elk met zijn unieke manier om HTML-elementen te selecteren. Laten we ze verkennen:
| CSS-kiezers | Beschrijving |
|---|---|
Eenvoudige selectors | Het wordt gebruikt om de HTML-elementen te selecteren op basis van hun elementnaam, ID, attributen, enz |
| Universele selector | Selecteert alle elementen op de pagina. |
| Kenmerkkiezer | Richt zich op elementen op basis van hun attribuutwaarden. |
| Pseudoklassekiezer | Selecteert elementen op basis van hun staat of positie, zoals:hover>voor hover-effecten. |
| Combinator-kiezers | Combineer selectors om relaties tussen elementen op te geven, zoals onderliggende elementen (>) of kind (>>). |
| Pseudo-elementkiezer | Selecteert specifieke delen van een element, zoals::before>of::after>. |
Inhoudsopgave
- Typen CSS-kiezers
- Eenvoudige selectors
- Elementkiezer
- ID-kiezer
- Klassenkiezer
- Universele selector
- Groepkiezer
- Kenmerkkiezer
- Pseudoklassekiezer
- Pseudo-elementkiezer
Eenvoudige selectors
Eenvoudige selectors bevatten de onderstaande klassen.
| Eenvoudige selectie | Beschrijving |
|---|---|
| Elementkiezer | Selecteert HTML-elementen op basis van hun tagnamen. |
| ID-kiezer | Richt zich op een HTML-element met een specifiek id-attribuut. |
| Klassenkiezer | Selecteert elementen met een bepaald klasse-attribuut. |
Voorbeeld: In dit voorbeeld zullen we de code schrijven om selectors en hun gebruik beter te begrijpen.
HTML CSS-kiezertitel><link rel='stylesheet' href='style.css' />hoofd> <body> <h1>Voorbeeldkoph1><p>Dit is inhoud in de eerste alineap><div id='div-container'>Dit is een div met id div-container div><p>Dit is een paragraaf met klasse paragraaf-klasse p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Opmerking:</strong> </b> <span>We zullen CSS-regels toepassen op het bovenstaande voorbeeld.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h2 id='element-selector'> <b> <strong>Elementkiezer</strong> </b> </h2><p dir='ltr'><span>De</span> <span>elementkiezer</span> <span>selecteert HTML-elementen op basis van de elementnaam (of tag), bijvoorbeeld p, h1, div, span, enz.</span></p> <p dir='ltr'> <b> <strong>OPMERKING :</strong> </b> <span>In het bovenstaande voorbeeld wordt de volgende code gebruikt. U kunt zien dat de CSS-regels op iedereen zijn toegepast</span> <span></span></p><p> <span>tags en</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-split-strings-c">c++ splitsreeks</a>
</blockquote><h1>labels.<p></p> </h1><h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>h1 { color: red; font-size: 3rem; } p { color: white; background-color: gray; }></pre><p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-Element-Selectors-Voorbeeld-uitvoer"><p>Uitvoer van CSS-elementselector</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h2 id='id-selector'> <b> <strong>ID-kiezer</strong> </b> </h2><p dir='ltr'><span>De</span> <b> <strong>ID-kiezer</strong> </b> <span>maakt gebruik van de</span> <i> <em>ID-attribuut</em> </i> <span>van een HTML-element om een specifiek element te selecteren.</span> <b> <strong> </strong> </b> <span>Een</span> <b> <strong>ID kaart</strong> </b> <span>van het element is uniek om op een pagina te gebruiken</span> <b> <strong>het ID</strong> </b> <span>keuzeschakelaar.</span></p> <p dir='ltr'> <b> <strong>Opmerking:</strong> </b> <span>De volgende code wordt in het bovenstaande voorbeeld gebruikt met behulp van de id-selector.</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>#div-container{ color: blue; background-color: gray; }></pre><p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <img src='//techcodeview.com/img/css-questions/50/css-selectors-2.webp' alt="CSS-Id-selectors-voorbeeld-uitvoer"><p>CSS ID Selectors voorbeelduitvoer</p> <h2 id='class-selector'> <b> <strong>Klassenkiezer</strong> </b> </h2><p dir='ltr'><span>De</span> <b> <strong>klassenkiezer</strong> </b> <span>selecteert HTML-elementen met een specifiek klasse-attribuut.</span></p> <p dir='ltr'> <b> <strong>Opmerking:</strong> </b> <span>De volgende code wordt in het bovenstaande voorbeeld gebruikt met behulp van de klassenkiezer. Om een klassenkiezer te gebruiken, moet u ( . ) gevolgd door de klassenaam in CSS gebruiken. Deze regel wordt toegepast op het HTML-element met het class-attribuut</span> <i> <em>paragraaf-klasse</em> </i> <span></span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>.paragraph-class { color:white; font-family: monospace; background-color: purple; }></pre><p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-3.webp' alt="CSS-Klasse-Selectors-Voorbeeld-Uitvoer"><p>CSS-klassekiezer Voorbeelduitvoer</p> <h2 id='universal-selector'> <b> <strong>Universele selector</strong> </b> </h2><p dir='ltr'><span>De</span> <span>Universele keuzeschakelaar</span> <span>(*) in CSS wordt gebruikt om alle elementen in een HTML-document te selecteren. Het bevat ook andere elementen die zich onder een ander element bevinden.</span></p> <p dir='ltr'> <b> <strong>Opmerking:</strong> </b> <span>De volgende code wordt in het bovenstaande voorbeeld gebruikt met behulp van de universele selector. Deze CSS-regel wordt toegepast op elk HTML-element op de pagina:</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>* { color: white; background-color: black; }></pre><p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-4.webp' alt="CSS-Universele-Selector-Voorbeeld-Uitvoer"><p>CSS Universal Selector Voorbeelduitvoer</p> <h2 id='group-selector'> <b> <strong>Groepkiezer</strong> </b> </h2><p dir='ltr'><span>De</span> <b> <strong>Groepkiezer</strong> </b> <span>wordt gebruikt om alle door komma's gescheiden elementen in dezelfde stijl op te maken.</span></p> <p dir='ltr'> <b> <strong>Opmerking:</strong> </b> <span>Stel dat u gemeenschappelijke stijlen wilt toepassen op verschillende selectors, in plaats van regels afzonderlijk te schrijven, kunt u ze in groepen schrijven, zoals hieronder weergegeven.</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }></pre><p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-5.webp' alt="CSS-Groep-Selector-Voorbeeld-Uitvoer"><p>CSS-groepkiezer Voorbeelduitvoer</p> <h2 id='attribute-selector'> <b> <strong>Kenmerkkiezer</strong> </b> </h2><p dir='ltr'><span>De</span> <b> <strong>attribuutkiezer</strong> </b> <span>[attribuut] wordt gebruikt om de elementen met een opgegeven attribuut of attribuutwaarde te selecteren.</span></p> <p dir='ltr'> <b> <strong>Opmerking:</strong> </b> <span>De volgende code wordt in het bovenstaande voorbeeld gebruikt met behulp van de attribuutselector. Deze CSS-regel wordt toegepast op elk HTML-element op de pagina:</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>[href] { background-color: lightgreen; color: black; font-family: monospace; font-size: 1rem; }></pre><p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-6.webp' alt="CSS-Attribuut-Selectros-Voorbeeld-Uitvoer"><p>CSS-attribuut Selectros Voorbeelduitvoer</p> <h2 id='pseudoclass-selector'> <b> <strong>Pseudoklassekiezer</strong> </b> </h2><p dir='ltr'><span>Het wordt gebruikt om een speciaal type status van elk element te stylen. Bijvoorbeeld: het wordt gebruikt om een element op te maken als de muiscursor erover beweegt.</span></p> <p dir='ltr'> <b> <strong>Opmerking:</strong> </b> <span>We gebruiken een enkele dubbele punt(:) in het geval van a</span> <span>Pseudoklassekiezer</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Syntaxis:</strong> </b> </p> <pre class='hljs'>Selector:Pseudo-Class { Property: Value; }></pre><h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>h1:hover{ background-color: aqua; }></pre><p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-Pseudo-Selector-Voorbeeld-Uitvoer"><p>CSS Pseudo Selector Voorbeelduitvoer</p> <h2 id='pseudoelement-selector'> <b> <strong>Pseudo-elementkiezer</strong> </b> </h2><p dir='ltr'><span>Het wordt gebruikt om elk specifiek deel van het element te stylen. Bijvoorbeeld: het wordt gebruikt om de eerste letter of de eerste regel van een element op te maken.</span></p> <p dir='ltr'> <b> <strong>Opmerking:</strong> </b> <span>We gebruiken een dubbele dubbele punt(::) in het geval van a</span> <span>Pseudo-elementkiezer</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Syntaxis:</strong> </b> </p> <pre class='hljs'>Selector:Pseudo-Element{ Property:Value; }></pre><h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>p::first-line{ background-color: goldenrod; }></pre><p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-7.webp' alt="CSS-Pseudo-Element-Selector-Voorbeeld-Uitvoer"><p>CSS Pseudo-Element Selector Voorbeelduitvoer</p> <p dir='ltr'> <br></p> <br> <br></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/testng-tutorial/">Testng-Zelfstudie</a> </li><li> <a href="/java-string-programs/">Java-String-Programma's</a> </li><li> <a href="/bitwise-operators/">Bitwise-Operatoren</a> </li><li> <a href="/complexity-analysis/">Complexiteitsanalyse</a> </li><li> <a href="/dbms-sql/">Dbms-Sql</a> </li><li> <a href="/python-built-functions/">Ingebouwde Python-Functies</a> </li><li> <a href="/cpp-basics/">Cpp-Basisprincipes</a> </li><li> <a href="/gcc/">Gcc</a> </li><li> <a href="/csharp-generic-hashset/">Csharp-Generieke-Hashset</a> </li><li> <a href="/csharp-file-handling/">Csharp-Bestandsafhandeling</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Wat is een MacBook?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Wat is een MacBook met uitleg over invoerapparaat, uitvoerapparaat, geheugen, CPU, moederbord, computernetwerk, virus, software, hardware etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-is-macbook"> <i class="fa fa-external-link"></i> Lees Verder</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikelen</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-install-atom-macos">Hoe Atom op MacOS te installeren</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/zeroes-million-billion">Nullen in miljoen, miljard, biljoen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/9-best-jesuit-colleges-1311192">De 9 beste jezuïetencolleges</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-program-print-fibonacci-sequence">Python-programma om de Fibonacci-reeks af te drukken</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-make-calendar-google-sheets">Hoe u een kalender maakt in Google Spreadsheets</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Populaire Berichten</h2>
<div class="content">
<ul class="list"> <li><a href="/java-string-compare">vergelijk in tekenreeks</a>
</li><li><a href="/string-concatenation-java">aaneenschakelingsreeks in Java</a>
</li><li><a href="/fibonacci-series-java">fibonacci-reeks in Java</a>
</li><li><a href="/spring-boot-architecture">veerlaarsarchitectuur</a>
</li><li><a href="/list-cities-usa">namen van steden VS</a>
</li><li><a href="/java-convert-char-string">char tostring java</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Alle Rechten Voorbehouden | <a href="//sv.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij?</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>