CSS > Les sélecteurs, les pseudo-éléments

GÉNÉRAL

Selecteur	Exemple	Description
.class	.intro	Selects all elements with
#id	#firstname	Selects the element with id="firstname"
*	*	Selects all elements
element	p	Selects all <p> elements
element,element	div, p	Selects all <div> elements and all <p> elements
element element	div p	Selects all <p> elements inside <div> elements
element>element	div > p	Selects all <p> elements where the parent is a <div> element
element+element	div + p	Selects all <p> elements that are placed immediately after <div> elements
element1~element2	p ~ ul	Selects every <ul> element that are preceded by a <p> element
[attribute]	[target]	Selects all elements with a target attribute
[attribute=value]	[target=_blank]	Selects all elements with target="_blank"
[attribute~=value]	[title~=flower]	Selects all elements with a title attribute containing the word "flower"
[attribute|=value]	[lang|=en]	Selects all elements with a lang attribute value starting with "en"
[attribute^=value]	a[href^="https"]	Selects every <a> element whose href attribute value begins with "https"
[attribute$=value]	a[href$=".pdf"]	Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value]	a[href*="w3schools"]	Selects every <a> element whose href attribute value contains the substring "w3schools"
:active	a:active	Selects the active link
::after	p::after	Insert content after every <p> element
::before	p::before	Insert content before the content of every <p> element
:checked	input:checked	Selects every checked <input> element
:disabled	input:disabled	Selects every disabled <input> element
:empty	p:empty	Selects every <p> element that has no children (including text nodes)
:enabled	input:enabled	Selects every enabled <input> element
:first-child	p:first-child	Selects every <p> element that is the first child of its parent
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent
:focus	input:focus	Selects the input element which has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects input elements with a value within a specified range
invalid	input:invalid	Selects all input elements with an invalid value
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute equal to "it" (Italian)
:last-child	p:last-child	Selects every <p> element that is the last child of its parent
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a <p> element
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
:only-child	p:only-child	Selects every <p> element that is the only child of its parent
:optional	input:optional	Selects input elements with no "required" attribute
:out-of-range	input:out-of-range	Selects input elements with a value outside a specified range
:read-only	input:read-only	Selects input elements with the "readonly" attribute specified
:read-write	input:read-write	Selects input elements with the "readonly" attribute NOT specified
:required	input:required	Selects input elements with the "required" attribute specified
:root	:root	Selects the document’s root element
::selection	::selection	Selects the portion of an element that is selected by a user
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all input elements with a valid value
:visited	a:visited	Selects all visited links

 

 

SAUF

:not()

 

tous sauf le premier élément :

 

.someContainer:not(:first-of-type)

—

https://sutterlity.gitbooks.io/apprendre-jquery/content/parcourir_le_dom/les_parents.html

 

PARENTS

.parent()

parent() retourne l’élément parent direct de l’élément sélectionné. Ne traverse qu’un seul niveau dans l’arborescence DOM.

L’exemple suivant retourne l’élément parent direct de chaque class="box-inner" et lui ajoute class="box".

<main>
    <section>
        <div>
            <div class="box-inner">…</div>
        </div>
    </section>
</main>
$('.box-inner').parent().addClass('box');

Résultat

<main>
    <section>
        <div class="box">
            <div class="box-inner">…</div>
        </div>
    </section>
</main>

.parents()

http://api.jquery.com/parents/ retourne tous les éléments ancêtres de l’élément sélectionné.

L’exemple suivant retourne les éléments parents jusqu’à main et leur ajoute class="clearfix".

<main>
    <section>
        <div>
            <div class="box-inner">…</div>
        </div>
    </section>
</main>

$('.box-inner').parents('main').addClass('clearfix');

Résultat

<main class="clearfix">
    <section class="clearfix">
        <div class="clearfix">
            <div class="box-inner">…</div>
        </div>
    </section>
</main>

.parentsUntil()

http://api.jquery.com/parentsUntil/ retourne tous les éléments ancêtres entre deux arguments donnés.

L’exemple suivant retourne les éléments parents au niveau en dessous de main et leur ajoute class="clearfix".

<main>
    <section>
        <div>
            <div class="box-inner">…</div>
        </div>
    </section>
</main>

$('.box-inner').parentsUntil('main').addClass('clearfix');

Résultat

<main>
    <section class="clearfix">
        <div class="clearfix">
            <div class="box-inner">…</div>
        </div>
    </section>
</main>

.closest()

http://api.jquery.com/closest/ retourne le plus proche élément ancêtre de l’élément sélectionné.

L’exemple suivant retourne le plus proche élément ancêtre section et lui ajoute class="clearfix".

<main>
    <section>
        <div>
            <div class="box-inner">…</div>
        </div>
    </section>
</main>

$('.box-inner').closest('section').addClass('clearfix');

Résultat

<main>
    <section class="clearfix">
        <div>
            <div class="box-inner">…</div>
        </div>
    </section>
</main>

ENFANTS

—

FRÈRES

.siblings()

http://api.jquery.com/siblings/ retourne tous les éléments frères de l’élément sélectionné.

L’exemple suivant ajoute class="selected" aux frères de class="item".

<ul class="list">
    <li>…</li>
    <li>…</li>
    <li>…</li>
    <li class="item">…</li>
    <li>…</li>
    <li>…</li>
    <li>…</li>
</ul>

$('.item').siblings().addClass('selected');

Résultat

<ul class="list">
    <li class="selected">…</li>
    <li class="selected">…</li>
    <li class="selected">…</li>
    <li class="item">…</li>
    <li class="selected">…</li>
    <li class="selected">…</li>
    <li class="selected">…</li>
</ul>

.next()

http://api.jquery.com/next/ retourne le frère suivant de l’élément sélectionné.

L’exemple suivant ajoute class="selected" au frère suivant de class="item".

<ul class="list">
    <li>…</li>
    <li>…</li>
    <li>…</li>
    <li class="item">…</li>
    <li>…</li>
    <li>…</li>
    <li>…</li>
</ul>

$('.item').next().addClass('selected');

Résultat

<ul class="list">
    <li>…</li>
    <li>…</li>
    <li>…</li>
    <li class="item">…</li>
    <li class="selected">…</li>
    <li>…</li>
    <li>…</li>
</ul>

Méthode .nextAll()

http://api.jquery.com/nextAll/ retourne tous les frères suivants de l’élément sélectionné.

L’exemple suivant ajoute class="selected" aux frères suivants de class="item".

<ul class="list">
    <li>…</li>
    <li>…</li>
    <li class="item">…</li>
    <li>…</li>
    <li>…</li>
</ul>

$('.item').nextAll().addClass('selected');

Résultat

<ul class="list">
    <li>…</li>
    <li>…</li>
    <li class="item">…</li>
    <li class="selected">…</li>
    <li class="selected">…</li>
</ul>

Méthode .nextUntil()

http://api.jquery.com/nextUntil/retourne tous les frères suivants entre les éléments sélectionnés.

L’exemple suivant ajoute class="selected" aux frères suivants entre class="item" et le class="other-class".

<ul class="list">
    <li>…</li>
    <li>…</li>
    <li>…</li>
    <li class="item">…</li>
    <li>…</li>
    <li>…</li>
    <li class="other-class">…</li>
</ul>

$('.item').nextUntil('.other-class').addClass('selected');

Résultat

<ul class="list">
    <li>…</li>
    <li>…</li>
    <li>…</li>
    <li class="item">…</li>
    <li class="selected">…</li>
    <li class="selected">…</li>
    <li class="other-class">…</li>
</ul>

Méthode .prev()

http://api.jquery.com/prev/retourne le frère prédédent l’élément sélectionné.

L’exemple suivant ajoute class="selected" au frère prédédent de class="item".

<ul class="list">
    <li>…</li>
    <li>…</li>
    <li>…</li>
    <li class="item">…</li>
    <li>…</li>
    <li>…</li>
    <li>…</li>
</ul>

$('.item').prev().addClass('selected');

Résultat

<ul class="list">
    <li>…</li>
    <li>…</li>
    <li class="selected">…</li>
    <li class="item">…</li>
    <li>…</li>
    <li>…</li>
    <li>…</li>
</ul>

Méthode .prevAll()

http://api.jquery.com/prevAll/retourne tous les frères prédédents de l’élément sélectionné.

L’exemple suivant ajoute class="selected" aux frères prédédents de class="item".

<ul class="list">
    <li>…</li>
    <li>…</li>
    <li>…</li>
    <li class="item">…</li>
    <li>…</li>
    <li>…</li>
    <li>…</li>
</ul>

$('.item').prevAll().addClass('selected');

Résultat

<ul class="list">
    <li class="selected">…</li>
    <li class="selected">…</li>
    <li class="selected">…</li>
    <li class="item">…</li>
    <li>…</li>
    <li>…</li>
    <li>…</li>
</ul>

Méthode .prevUntil()

http://api.jquery.com/prevUntil/retourne tous les frères prédédents entre les éléments sélectionnés.

L’exemple suivant ajoute class="selected" aux frères prédédents entre class="item" et class="other-class".

<ul class="list">
    <li>…</li>
    <li class="other-class">…</li>
    <li>…</li>
    <li>…</li>
    <li class="item">…</li>
    <li>…</li>
    <li>…</li>
</ul>

$('.item').prevUntil('.other-class').addClass('selected');

Résultat

<ul class="list">
    <li>…</li>
    <li class="other-class">…</li>
    <li class="selected">…</li>
    <li class="selected">…</li>
    <li class="item">…</li>
    <li>…</li>
    <li>…</li>
</ul>