# Hiërarchische selectors
Zie:
Hiërarchische selectors kan u best vergelijken met een stamboom. Bekijk in onderstaande code hoe de tags in elkaar genest zijn.
```markup
| Opleiding: |
Datum: |
Lokaal: |
| Dreamweaver |
15 december |
PC1 |
```
De hiërarchische selectors zijn:
* **Parent en child**\
**Parent en child** zijn geneste tags op het eerste niveau.\
De thead-tag en de tbody-tag staan rechtstreeks onder de table-tag en gedragen zich in een *parent-child* relatie.\
\&#xNAN;*table* is een **parent** van *thead* of\
\&#xNAN;*thead* is een **child** van *table*.
* **Siblings**\
**Siblings** (broers of zussen) zijn elementen die op gelijk niveau staan.\
De drie td-tags binnen een tr-tag zijn **siblings** van elkaar.
* **Ancestor** (voorouder)\
Een *ancestor* kan de *parent* zijn, maar ook de *parent* van de *parent*, of nog een verdere relatie.\
\&#xNAN;*th* heeft als **parent** *tr*.\
\&#xNAN;*th* heeft als **ancestor** *tr*, maar ook *thead* en *table*.
* **Descendant** (nakomeling)\
Een *descendant* kan een *child* zijn, maar ook een *child* van een *child* of nog een verdere relatie.\
\&#xNAN;*table* heeft als **child** *thead* en *tbody*.\
\&#xNAN;*table* heeft als **descendant** *thead*, *tbody*, maar ook *tr*, *th* en *td*.
{% hint style="success" %}
★ Controleer onderstaande selecties op het oefenbestand.\
★ Je mag enkel het deel tussen de aanhalingstekens invullen.\
★ Bijvoorbeeld: `table tr` en niet `$('table tr')`.
{% endhint %}
## Descendant selector: $('ancestor descendant')
```javascript
$('table tr') // alle tr-tags binnen een tabel
$('table td') // alle td-tags binnen een tabel
$('table td a') // enkel de links in td-tags van een tabel
$('ul *') // alle tags binnen een ul-tag
```
## Child selector: $('parent > child')
```javascript
$('table > tbody') // de tbody-tags die een child zijn van een tabel
$('table > td') // de td-tags die een child zijn van een tabel (*)
$('table > tbody > tr') // alle tabelrijen die een child zijn van tbody-tags die op hun beurt een child zijn van table
```
(\*) Merk op dat in ons voorbeeld geen enkele td-tag rechtstreeks onder de table-tag staat. Er wordt dus niets geselecteerd!
## Sibling selector (alle volgende) : $('prev \~ sibling')
```javascript
$('thead ~ tbody') // alle tbody-tags die op hetzelfde niveau staan van en volgen op een thead-tag
$('li ~ li') // alle li-tags die op hetzelfde niveau staan van en volgen op een li-tag
$('h3 ~ p') // alle p-tags die op hetzelfde niveau staan van en volgen op een h3-tag
```
## Sibling selector (dadelijk aangrenzende): $('prev + next')
```javascript
$('thead + tbody') // alle tbody-tags die op hetzelfde niveau staan van en DADELIJK volgen op een thead-tag.
$('li + li') // alle li-tags die op hetzelfde niveau staan van en DADELIJK volgen op een li-tag
$('h3 + p') // alle p-tags die op hetzelfde niveau staan van en DADELIJK volgen op een h3-tag
```
In het laatste voorbeeld worden *paragraaf2* en *paragraaf3* niet geselecteerd.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://1itf.gitbook.io/jquery/4-elementen-selecteren/hierarchische-selectors.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.