css-selector.md

CSS SELECTOR CHEAT SHEET

source :

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
• https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Simple selector

  <ul>
    <li>Alice</li>
    <li>Bob</li>
    <li>Charlie</li>
    <li>Eve</li>
  </ul>

document.querySelector('ul li:first-child').innerText  // Alice
document.querySelector('ul li:nth-child(2)').innerText // Bob
document.querySelector('ul li:last-child').innerText // Eve

Multiple selector

  <ul>
    <li>Alice</li>
    <li>Bob</li>
    <li>Charlie</li>
    <li>Eve</li>
  </ul>

  <ul>
    <li>Cecile</li>
    <li>Nicolas</li>
    <li>Guillaume</li>
    <li>Tim</li>
  </ul>

document.querySelectorAll('ul li:first-child');  // Alice and Cecile
document.querySelectorAll('ul li:nth-child(2)'); // Bob and Nicolas
document.querySelectorAll('ul li:last-child');   // Eve and Tim

document.querySelector('body ul:last-child li:first-child') // Cecile

ul li:first-child {
  color: #FF0000;
}