> For the complete documentation index, see [llms.txt](https://1itf.gitbook.io/jquery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1itf.gitbook.io/jquery/4-elementen-selecteren/hierarchische-selectors.md).

# Hiërarchische selectors

Zie: <http://api.jquery.com/category/selectors/hierarchy-selectors/>

Hiërarchische selectors kan u best vergelijken met een stamboom. Bekijk in onderstaande code hoe de tags in elkaar genest zijn.

```markup
<table class="table">
    <thead>
        <tr>
            <th>Opleiding:</th>
            <th>Datum:</th>
            <th>Lokaal:</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dreamweaver</td>
            <td>15 december</td>
            <td>PC1</td>
        </tr>
    </tbody>
</table>
```

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.\
  *table* is een **parent** van *thead* of\
  *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.\
  *th* heeft als **parent** *tr*.\
  *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.\
  *table* heeft als **child** *thead* en *tbody*.\
  *table* heeft als **descendant** *thead*, *tbody*, maar ook *tr*, *th* en *td*.

![](/files/-L9pjWgmX5G1GqePnvUn)

{% hint style="success" %}
★ Controleer onderstaande selecties op het oefenbestand.\
&#x20;★ Je mag enkel het deel tussen de aanhalingstekens invullen.\
&#x20;★ 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
```

## &#x20;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.