• 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=&quot;box-inner&quot; et lui ajoute class=&quot;box&quot;.

      <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=&quot;clearfix&quot;.

      <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=&quot;clearfix&quot;.

      <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=&quot;clearfix&quot;.

      <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=&quot;selected&quot; aux frères de class=&quot;item&quot;.

      <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=&quot;selected&quot; au frère suivant de class=&quot;item&quot;.

      <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=&quot;selected&quot; aux frères suivants de class=&quot;item&quot;.

      <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=&quot;selected&quot; aux frères suivants entre class=&quot;item&quot; et le class=&quot;other-class&quot;.

      <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=&quot;selected&quot; au frère prédédent de class=&quot;item&quot;.

      <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=&quot;selected&quot; aux frères prédédents de class=&quot;item&quot;.

      <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=&quot;selected&quot; aux frères prédédents entre class=&quot;item&quot; et class=&quot;other-class&quot;.

      <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>
      
      

 

Aucun commentaire

 

Laissez un commentaire