CSS Selector

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

Op deze pagina:

Er zijn verschillende gebieden binnen de axe Auditor-toepassing die een Selector -veld bieden. Volg dit proces wanneer je een specifieke CSS-selector wilt opgeven om te testen als onderdeel van het volgende:

  • Algemeen Component (Nieuw Testgeval > Component Toevoegen): Bij het definiëren van een algemeen component op het paneel voor Algemene Componenten bij het maken van een nieuw Testgeval.
  • Pagina Gebied Component (Nieuw Testgeval > Pagina Toevoegen > Pagina Gebied Bereik): Bij het definiëren van een Pagina Gebied op het paneel Pagina's Toevoegen bij het maken van een nieuw Testgeval.
  • Pagina Gebied Component (Pagina Voorbereiden voor Automatisch en Handmatig Testen > Pagina Gebied Bereik): Bij het definiëren van een Pagina Gebied van de „pagina onder test“ op het scherm Pagina Voorbereiden voor Automatisch en Handmatig Testen, toegankelijk vanuit Test Run Overzicht.

Aan de slag

Het lokaliseren en kopiëren van een selector houdt meestal in dat je de „ontwikkelaarstools“ gebruikt die bij je webbrowser worden geleverd. Deze hebben verschillende namen afhankelijk van het browsertype, en elk biedt sneltoetsen voor toegang tot de tools en om erin te navigeren.

Referentie van Sneltoetsen per Browsertype

Op een Mac: Over het algemeen kan de Cmd -toets (⌘) worden vervangen door [Ctrl] op een OSX- of iOS-apparaat.

Ontwikkelaarstools openen (Firefox Voorbeeld)

Het volgende voorbeeld toont het gebruik van Mozilla Firefox Developer Tools. Voor meer informatie over het gebruik van sneltoetsen met Firefox Developer Tools, zie Mozilla Developer Sneltoetsen.

Je kunt de Inspector (een van de Ontwikkelaarstools waarmee je ze allemaal kunt starten) op een van de volgende manieren openen:

  • Zonder een geselecteerd element: Kies de **Inspector** optie uit het **Ontwikkelaar** menu (Ctrl+Shift+I), of selecteer vanuit de Firefox menubalk **Extra > Webontwikkelaar > Inspector (Ctrl+Shift+C)**.
  • Met een geselecteerd element*: **Rechtsklik** op een element op een webpagina en selecteer **Element inspecteren [(Q)]{.kbd}**.

Een selector kopiëren van een pagina

  1. Right-click op het gewenste deel van de testpagina, selecteer dan Inspect Element in het menu om de Inspector te starten zodat je vervolgens een element op de pagina kunt selecteren (of gebruik sneltoets Ctrl+Shift+I).
    Context menu showing Inspect Element option after right-clicking on the page under test
  2. Kopieer de CSS-selector die je wilt targeten. Bijvoorbeeld, bij gebruik van Firefox Developer Tools kun je right-click > Copy Unique Selector voor het momenteel geselecteerde element in het Inspector-tool. Zorg ervoor dat je de correct geformatteerde volledige elementreferentie plakt (bijvoorbeeld, om het id attribuutelement voor de waarde 'main' te testen, zou je #main als de selector specificeren).
    Firefox Developer Tools context menu showing Copy Unique Selector option

    Information - Selector Formatting Reference with Example:
    Voor volledige details over correct geformatteerde CSS-selectors en volledige elementreferentie, zie Mozilla Developer Web CSS Selector documentatie of Selectors Level 3 W3C Aanbeveling.

    • Selector: #id → De #id selector stijlt het element met het gespecificeerde id.
    • Example: #main → Het gespecificeerde id is main.
    • Example Reference: Selecteert het element met id="main".
    DevTools Inspect Element showing CSS selector for an element with id=main
  3. Plak de selector die je van het virtuele klembord hebt gekopieerd in het Selector veld.
    Wanneer je toegang hebt tot de resulterende problemen die zijn gevonden voor de component of paginagebied dat je targette, zul je die gerelateerd aan de specifieke CSS-selector die je hebt ingevoerd zien.
  4. Bekende bug: Bij gebruik van de CSS Selector in de Chrome-browser. Rechts Inspecteren, Open Dev-tools, op elemententab, zoek css-selector om te targeten klik en element>kopiëren>xpath of element>kopiëren>Volledige xpath geeft altijd deze fout terug,\ ' Er is een onbekende fout opgetreden. Als deze testcase componenten of pagina-gebieden bevat, zorg ervoor dat alle selectors geldig zijn'
    Workaround: Zoek het ID voor de CSS-selector en gebruik Copy > Copy Selector.

Wat zijn Selectors?

**Kort Antwoord**: Het zijn tekstreeksen die kunnen worden gebruikt om een element of groep elementen op een webpagina te identificeren.

**Iets langer, Technischer Antwoord**: Selectors zijn patronen die overeenkomen met elementen in een boomstructuur, en kunnen worden gebruikt om specifieke fragmenten te testen of knooppunten binnen HTML- of XML-documenten te selecteren. De Cascading Style Sheet (CSS3) taal beschrijft de weergave van HTML-documenten op scherm of in spraak, en gebruikt selectors voor het binden van stijleigenschappen aan elementen in HTML-documenten.

**Gebruik**: Door de expressie te evalueren over alle elementen in een substructuur, kunnen selectors worden gebruikt om:

  • Een set van elementen te selecteren
  • Een enkel element te selecteren uit een set van elementen

**Structuur**: Een selector vertegenwoordigt een structuur die kan worden gebruikt als een voorwaarde (zoals in een CSS-regel) die bepaalt welke elementen een selector overeenkomt in een documentboom, of als een platte beschrijving van het HTML- of XML-fragment dat bij die structuur hoort.

Typen: Selectortypen omvatten:

  • Universeel: De gekwalificeerde naam van elk elementtype (*) Bijvoorbeeld, om de gekwalificeerde naam van elk Engelstalig element in de documentboom voor elke naamruimte op te geven, voer in:

    *[hreflang|=en]

  • Type: Een optionele voorvoegsel van een naamruimte-component voorafgaand aan een elementnaam (|) Bijvoorbeeld, om een kop 2 element in de documentboom weer te geven, voer simpelweg in:

    h2

  • Attribuut: Vertegenwoordigt een attribuut van een element ([]) Bijvoorbeeld, om een h3-element weer te geven dat het titelattribuut meedraagt, ongeacht de waarde ervan, voer in:

    h3[title]

  • Klasse: Puntennotatie om het klasse-attribuut voor de betreffende naamruimte weer te geven (.) Bijvoorbeeld, om stijlinformatie toe te wijzen met groen voor alle elementen met class="example", voer in:

    .example { color: green } / alle elementen met class=example */

  • ID: Attributen die zijn gedeclareerd als type ID identificeren een element uniek met een hekje (#) Bijvoorbeeld, om een ID-selector weer te geven waar elk element waarvan de attribuutwaarde van het type ID "12345" is, voer in:

    #12345

  • Pseudo-klassen: Selectie van informatie buiten de documentboom die niet kan worden uitgedrukt met eenvoudige selectoren (:) Bijvoorbeeld, om een selector op te geven die links weergeeft met klasse 'extern' en die al bezocht zijn, voer in:

    a.external:visited

  • Pseudo-elementen: Twee dubbelepunten gevolgd door de naam van een pseudo-element maken toegang tot inhoud buiten de huidige documentboom mogelijk, en slechts één per selector is toegestaan (::)

    Bijvoorbeeld, om de letters van de eerste regel van elk p-element naar hoofdletters te veranderen, voer in:

    p::first-line { text-transform: uppercase }

  • Combinators: Hiermee kan een hiërarchisch pad worden gespecificeerd om afstamming zoals kind- of broederelementen te tonen ( ) of (+)

    Bijvoorbeeld, om 'em'-elementen te targeten die afstammelingen zijn van 'h1'-elementen, voer in:

    h1 em.

    Het is een correcte en geldige, maar gedeeltelijke, beschrijving van het volgende fragment:

    <h1>Dit <span class="myclass"> kop is <em>zeer>/em> belangrijk</span></h1>

Syntax: De basis „grammatica“ van selectors omvat het volgende:

  • *: 0 of meer (Opmerking: Aangezien dit kan worden weggelaten wanneer het wordt geïmpliceerd, wordt het niet vaak gebruikt.)
  • +: 1 of meer
  • ?: 0 of 1
  • |: scheidt alternatieven
  • [ ]: groepering

Uitgebreide Referentie: Voor meer informatie, zie World Wide Web Consortium (W3C) - Selectors Level 3: https://drafts.csswg.org/selectors-3/

Gerelateerde Onderwerpen:

Is this page helpful?

Help us improve this page

Still need help?