CSS Selector Cheat Sheet

Selects all elements on the page.

CSS:* { color: red;}HTML:<p>This is a paragraph.</p><div>This is a div.</div>

Selects all elements of a given type.

CSS:p { color: blue;}HTML:<p>This is a paragraph.</p><p>This is another paragraph.</p>

Selects all elements with the specified class.

CSS:.example { color: green;}HTML:<div class="example">This is a div.</div><p class="example">This is a paragraph.</p>

Selects the element with the specified ID.

CSS:#unique { color: purple;}HTML:<div id="unique">This is a unique div.</div>

Selects elements with the specified attribute.

CSS:[input] { border: 1px solid black;}HTML:<input type="text" placeholder="Type here">

Selects elements with the specified attribute and value.

CSS:[input="text"] { border: 1px solid red;}HTML:<input type="text" placeholder="Type here">

Selects elements with the specified attribute containing a specific word.

CSS:[class~="example"] { border: 1px solid blue;}HTML:<div class="example">This is a div.</div>

Selects elements with the specified attribute starting with a specific value.

CSS:[lang|="en"] { color: green;}HTML:<div lang="en-US">This is a div.</div>

Selects elements with the specified attribute starting with a specific value.

CSS:[href^="https"] { color: red;}HTML:<a href="https://example.com">Link</a>

Selects elements with the specified attribute ending with a specific value.

CSS:[href$=".com"] { color: blue;}HTML:<a href="https://example.com">Link</a>

Selects elements with the specified attribute containing a specific value.

CSS:[title*="example"] { color: purple;}HTML:<a href="#" title="example link">Link</a>

Selects the first line of a block element.

CSS:p::first-line { font-weight: bold;}HTML:<p>This is a paragraph with a bold first line.</p>

Selects the first letter of a block element.

CSS:p::first-letter { font-size: 200%;}HTML:<p>This is a paragraph with a large first letter.</p>

Selects the portion of an element that is selected by a user.

CSS:::selection { background: yellow;}HTML:<p>Select this text to see the background change.</p>

Inserts content after an element.

CSS:p::after { content: " (after)";}HTML:<p>This is a paragraph.</p>

Inserts content before an element.

CSS:p::before { content: "before: ";}HTML:<p>This is a paragraph.</p>

Selects the placeholder text of an input.

CSS:::placeholder { color: grey;}HTML:<input type="text" placeholder="Type here">

Selects disabled input elements.

CSS:input:disabled { background: #ccc;}HTML:<input type="text" disabled placeholder="Disabled input">

Selects enabled input elements.

CSS:input:enabled { background: #fff;}HTML:<input type="text" placeholder="Enabled input">

Selects checked input elements.

CSS:input:checked { outline: 2px solid green;}HTML:<input type="checkbox" checked> Checked box

Selects read-only input elements.

CSS:input:read-only { background: #f5f5f5;}HTML:<input type="text" readonly value="Read-only input">

Selects input elements with placeholder text.

CSS:input:placeholder-shown { color: grey;}HTML:<input type="text" placeholder="Type here">

Selects input elements with a value outside a specified range.

CSS:input:out-of-range { border-color: red;}HTML:<input type="number" min="1" max="10" value="15">

Selects required input elements.

CSS:input:required { border: 2px solid red;}HTML:<input type="text" required placeholder="Required input">

Selects unvisited links.

CSS:a:link { color: blue;}HTML:<a href="https://example.com">Link</a>

Selects elements when hovered by a mouse.

CSS:a:hover { color: red;}HTML:<a href="https://example.com">Hover over this link</a>

Selects visited links.

CSS:a:visited { color: purple;}HTML:<a href="https://example.com">Visited link</a>

Selects elements that are being activated by a user.

CSS:a:active { color: green;}HTML:<a href="https://example.com">Active link</a>

Selects the first child of a parent.

CSS:p:first-child { color: blue;}HTML:<div> <p>First paragraph</p> <p>Second paragraph</p></div>

Selects the nth child of a parent.

CSS:p:nth-child(2) { color: red;}HTML:<div> <p>First paragraph</p> <p>Second paragraph</p> <p>Third paragraph</p></div>

Selects the last child of a parent.

CSS:p:last-child { color: green;}HTML:<div> <p>First paragraph</p> <p>Second paragraph</p> <p>Last paragraph</p></div>

Selects the nth child from the end of a parent.

CSS:p:nth-last-child(2) { color: purple;}HTML:<div> <p>First paragraph</p> <p>Second to last paragraph</p> <p>Last paragraph</p></div>

Selects an element that is the only child of its parent.

CSS:p:only-child { color: orange;}HTML:<div> <p>Only child paragraph</p></div>

Selects the first child of a specified type.

CSS:p:first-of-type { color: blue;}HTML:<div> <p>First paragraph</p> <p>Second paragraph</p></div>

Selects the nth child of a specified type.

CSS:p:nth-of-type(2) { color: red;}HTML:<div> <p>First paragraph</p> <p>Second paragraph</p></div>

Selects the last child of a specified type.

CSS:p:last-of-type { color: green;}HTML:<div> <p>First paragraph</p> <p>Last paragraph</p></div>

Selects the nth child from the end of a specified type.

CSS:p:nth-last-of-type(2) { color: purple;}HTML:<div> <p>First paragraph</p> <p>Second to last paragraph</p> <p>Last paragraph</p></div>

Selects all elements that are descendants of a specified element.

CSS:div p { color: blue;}HTML:<div> <p>This is a paragraph inside a div.</p></div>

Selects all elements that are direct children of a specified element.

CSS:div > p { color: red;}HTML:<div> <p>This is a direct child paragraph inside a div.</p></div>

Selects the element that is the next sibling of a specified element.

CSS:h1 + p { color: green;}HTML:<h1>Heading</h1><p>This paragraph is the next sibling of the heading.</p>

Selects all siblings following a specified element.

CSS:h1 ~ p { color: purple;}HTML:<h1>Heading</h1><p>This paragraph is a following sibling of the heading.</p>