Reinventing the Web

HTML Selectors — Simple Reference

This page is a minimal, practical reference for common CSS / DOM selectors, with short HTML examples only. No advanced or edge‑case selectors are included.

1. Tag name selectors

Select elements by their HTML tag name.

Selector examples

main
article
body

Example HTML

<body>
  <main>
    <article>
      <p>Article text</p>
    </article>
  </main>
</body>

2. Class selectors (full syntax)

Select elements by tag name and class name.

Selector example

div.entry-content

Example HTML

<div class="entry-content">
  Main content here
</div>

3. Class selectors (short syntax)

Select elements by class name only.

Selector example

.entry-content

Example HTML

<section class="entry-content">
  Same class, different tag
</section>

4. ID selectors

Select a single element by its unique id attribute.

Selector

#main-title

Example HTML

<div id="main-title">Page title</div>

5. Attribute selectors

Select elements by arbitrary attribute name and value.

Selector example

span[itemprop="publicationDate"]

Example HTML

<span itemprop="publicationDate">2025-03-01</span>

6. Scoped (descendant) selectors

Select elements inside other elements.

Selector

article h1

Example HTML

<article>
  <h1>Article title</h1>
  <p>Article text</p>
</article>

Notes

  • This list intentionally avoids pseudo‑classes, combinators, and advanced selectors.
  • Keep selectors simple when possible — they are easier to read, debug, and reuse.