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 onderdelen van de axe Auditor-applicatie die een Selector veld bieden. Volg dit proces wanneer u een specifieke CSS-selector wilt aangeven die moet worden getest als onderdeel van het volgende:

  • Algemeen Component (Nieuwe Testcase > Component Toevoegen): Bij het definiëren van een algemeen component op het Algemene Componenten paneel bij het aanmaken van een nieuwe Testcase.
  • Pagina Gebied Component (Nieuwe Testcase > Pagina Toevoegen > Pagina Gebied Scope): Bij het definiëren van een Pagina Gebied op het Pagina's Toevoegen paneel bij het creëren van een nieuwe Testcase.
  • Pagina Gebied Component (Pagina Voorbereiden voor Automatische en Handmatige Testen > Pagina Gebied Scope): Bij het definiëren van een Pagina Gebied van de „pagina onder test“ op het Voorpagina Voorbereiden voor Automatische en Handmatige Testen scherm toegankelijk vanaf Overzicht Testuitvoering.

Aan de slag

Het lokaliseren en kopiëren van een selector houdt meestal in dat u gebruikmaakt van de „ontwikkelaarstools“ die bij uw webbrowser worden geleverd. Deze hebben verschillende namen afhankelijk van het browsertype, en elk biedt toetsenbordsneltoetsen voor toegang tot de tools en navigatie binnen hen.

Referentie Toetsenbordsneltoetsen per Browser Type

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 Ontwikkelaarstools. Voor meer informatie over het gebruik van toetsenbordsneltoetsen met Firefox Ontwikkelaarstools, zie Mozilla Ontwikkelaar Toetsenbordsneltoetsen.

U kunt de Inspector (een van de Ontwikkelaarstools die ze allemaal opent) op een van de volgende manieren openen:

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

Een selector van een pagina kopiëren

  1. Right-click op het gewenste gedeelte van de testpagina, selecteer dan Inspect Element in het menu om de Inspector te starten zodat je een element op de pagina kunt selecteren (of gebruik de 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 de 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 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 de opgegeven id.
    • Example: #main → De opgegeven 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 de resulterende gevonden problemen voor de beoogde component of pagina-bereik bekijkt, zie je die gerelateerd aan de specifieke CSS selector die je hebt ingevoerd.
  4. Bekende bug: Bij gebruik van CSS Selector in Chrome Browser. Rechtsklikken om te inspecteren, Open de ontwikkelaarstools, op het tabblad elementen, vind de css selector om te targeten klik op element>kopieer>xpath of element>kopieer>Volledige xpath geeft altijd deze fout terug,\ ' Er is een onbekende fout opgetreden. Als deze testcase componenten of paginadelen bevat, zorg dan dat alle selectors geldig zijn'
    Workaround: Vind de 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, meer technisch 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 het weergeven van HTML-documenten op het scherm of in spraak, en gebruikt selectors voor het binden van stijleigenschappen aan elementen in HTML-documenten.

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

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

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

Typen: Selectortypen omvatten:

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

    *[hreflang|=en]

  • Type: Een optionele naamruimtecomponentprefix die wordt toegevoegd aan een elementnaam (|) Bijvoorbeeld, om een kop 2-element in de documentboom weer te geven, voert u eenvoudig in:

    h2

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

    h3[title]

  • Klasse: Puntnotatie of "punt"-notatie om het klasseattribuut weer te geven voor de desbetreffende naamruimte (.) Bijvoorbeeld, om stijlinformatie met een groene kleur toe te wijzen aan alle elementen met class="example", voert u in:

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

  • ID: Attributen die als ID zijn gedeclareerd, identificeren een element uniek met een hekje (#) Bijvoorbeeld, om een ID-selector weer te geven waarbij elk element waarvan de attribuutwaarde van het ID-type "12345" is, voert u 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 vertegenwoordigt die de klasse extern dragen en al bezocht zijn, voert u in:

    a.external:visited

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

    Bijvoorbeeld, om de letters van de eerste regel van elk p-element naar hoofdletters te wijzigen, voert u in:

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

  • Combinatoren: Maakt specificatie van een hiërarchisch pad mogelijk om verwantschap zoals kinder- of broederelementen aan te geven ( ) of (+)

    Bijvoorbeeld, om em-elementen te targeten die afstammelingen van h1-elementen zijn, voert u 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>

Syntaxis: De basis „grammatica“ van selectoren 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

Omvattende Referentie: Voor meer informatie, raadpleeg het 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?