Common

• Type selector
• Class selector (.)
• ID selector (#)

Complex

• Child selector

  • Descendant selector

    article p {...}

    <p>...</p>
    <article>
      <p>This will be styled</p>
      <div>
        <p>This will also be styled</p>
      </div>
    </article>

  • Direct child selector (>)

    article > p {...}

    <p>...</p>
    <article>
      <p>This will be styled</p>
      <div>
        <p>...</p>
      </div>
    </article>

• Sibling selector

  • General Sibling selector (~)

    h2 ~ p {...}

    <p>...</p>
    <section>
      <p>...</p>
      <h2>...</h2>
      <p>This will be styled</p>
      <div>
        <p>...</p>
      </div>
      <p>This will also be styled</p>
    </section>

  • Adjacent Sibling selector (+)

    h2 + p {...}

    <p>...</p>
    <section>
      <p>...</p>
      <h2>...</h2>
      <p>This will be styled</p>
      <div>
        <p>...</p>
      </div>
      <p>...</p>
    </section>

• Attribute selector

  • Attribute present selector ([])

    a[target] {...}

    <a href="#" target="_blank">This will be styled</a>
    <a href="http://google.com/">...</a>
    <a href="/login.php">...</a>
    <a href="https://chase.com">...</a>
    <a href="/docs/menu.pdf">...</a>
    <a href="#" rel="tag nofollow">...</a>
    <a href="#" rel="nofollow tag">...</a>
    <a href="#" lang="en-US">...</a>
    <a href="#" lang="US-en">...</a>

  • Attribute equals selector ([=""])

    a[href="http://google.com/"] {...}

    <a href="#" target="_blank">...</a>
    <a href="http://google.com/">This will be styled</a>
    <a href="/login.php">...</a>
    <a href="https://chase.com">...</a>
    <a href="/docs/menu.pdf">...</a>
    <a href="#" rel="tag nofollow">...</a>
    <a href="#" rel="nofollow tag">...</a>
    <a href="#" lang="en-US">...</a>
    <a href="#" lang="US-en">...</a>

  • Attribute contains selector ([*=""])

    a[href*="login"] {...}

    <a href="#" target="_blank">...</a>
    <a href="http://google.com/">...</a>
    <a href="/login.php">This will be styled</a>
    <a href="https://chase.com">...</a>
    <a href="/docs/menu.pdf">...</a>
    <a href="#" rel="tag nofollow">...</a>
    <a href="#" rel="nofollow tag">...</a>
    <a href="#" lang="en-US">...</a>
    <a href="#" lang="US-en">...</a>

  • Attribute begins with selector ([^=""])

    a[href^="https://"] {...}

    <a href="#" target="_blank">...</a>
    <a href="http://google.com/">...</a>
    <a href="/login.php">...</a>
    <a href="https://chase.com">This will be styled</a>
    <a href="/docs/menu.pdf">...</a>
    <a href="#" rel="tag nofollow">...</a>
    <a href="#" rel="nofollow tag">...</a>
    <a href="#" lang="en-US">...</a>
    <a href="#" lang="US-en">...</a>

  • Attribute ends with selector ([$=""])

    a[href$=".pdf"] {...}

    <a href="#" target="_blank">...</a>
    <a href="http://google.com/">...</a>
    <a href="/login.php">...</a>
    <a href="https://chase.com">...</a>
    <a href="/docs/menu.pdf">This will be styled</a>
    <a href="#" rel="tag nofollow">...</a>
    <a href="#" rel="nofollow tag">...</a>
    <a href="#" lang="en-US">...</a>
    <a href="#" lang="US-en">...</a>

  • Attribute spaced selector ([~=""])

    a[rel~="tag"] {...}

    <a href="#" target="_blank">...</a>
    <a href="http://google.com/">...</a>
    <a href="/login.php">...</a>
    <a href="https://chase.com">...</a>
    <a href="/docs/menu.pdf">...</a>
    <a href="#" rel="tag nofollow">This will be styled</a>
    <a href="#" rel="nofollow tag">This will also be styled</a>
    <a href="#" lang="en-US">...</a>
    <a href="#" lang="US-en">...</a>

  • Attribute hypenated selector ([|=""])

    a[lang|="en"] {...}

    <a href="#" target="_blank">...</a>
    <a href="http://google.com/">...</a>
    <a href="/login.php">...</a>
    <a href="https://chase.com">...</a>
    <a href="/docs/menu.pdf">...</a>
    <a href="#" rel="tag nofollow">...</a>
    <a href="#" rel="nofollow tag">...</a>
    <a href="#" lang="en-US">This will be styled</a>
    <a href="#" lang="US-en">...</a>  <!-- Will not be styled -->

• Pseudo-classes (:)

  • Link Pseudo-classes
  • User Action Pseudo-classes
  • User Interface State Pseudo-classes
  • Structure and Position Pseudo-classes
  • Target Pseudo-classes
  • Empty Pseudo-classes
  • Negation Pseudo-classes

• Pseudo-elements (::)

  • Textual Pseudo-elements
  • Generated content Pseudo-elements
  • Fragment Pseudo-elements