-
CSS > Les sélecteurs, les pseudo-éléments
GÉNÉRAL
Selecteur Exemple Description .class.introSelects all elements with #id#firstnameSelects the element with id="firstname" **Selects all elements elementpSelects all <p> elements element,element
div, pSelects all <div> elements and all <p> elements element elementdiv pSelects all <p> elements inside <div> elements element>elementdiv > pSelects all <p> elements where the parent is a <div> element element+elementdiv + pSelects all <p> elements that are placed immediately after <div> elements element1~element2p ~ ulSelects 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 :hovera:hover Selects links on mouse over :in-rangeinput:in-range Selects input elements with a value within a specified range invalid input:invalidSelects 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-typep:last-of-type Selects every <p> element that is the last <p> element of its parent :linka:linkSelects 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-typep:only-of-type Selects every <p> element that is the only <p> element of its parent :only-childp:only-child Selects every <p> element that is the only child of its parent :optionalinput:optional Selects input elements with no "required" attribute :out-of-rangeinput: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 :rootSelects the document’s root element ::selection ::selectionSelects 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) :validinput:validSelects all input elements with a valid value :visiteda:visitedSelects 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 ajouteclass="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 ajouteclass="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 ajouteclass="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 ajouteclass="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 declass="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 declass="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 declass="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 entreclass="item"
et leclass="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 declass="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 declass="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 entreclass="item"
etclass="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>