DEV Community

Nwafor Onyebuchi
Nwafor Onyebuchi

Posted on

CSS Selector Cheatsheet

Here’s a comprehensive CSS Selectors Cheat Sheet that covers all the basic and advanced selectors you might need:

1. Basic Selectors

  • Universal Selector (*): Targets all elements.
  * {
    margin: 0;
  }
Enter fullscreen mode Exit fullscreen mode
  • Type Selector (Element Selector): Targets elements of a given type.
  p {
    color: blue;
  }
Enter fullscreen mode Exit fullscreen mode
  • Class Selector (.classname): Targets elements with a specific class.
  .container {
    width: 100%;
  }
Enter fullscreen mode Exit fullscreen mode
  • ID Selector (#idname): Targets an element with a specific ID.
  #header {
    background-color: grey;
  }
Enter fullscreen mode Exit fullscreen mode

2. Attribute Selectors

  • [attribute]: Targets elements with the specified attribute.
  [type="text"] {
    border: 1px solid black;
  }
Enter fullscreen mode Exit fullscreen mode
  • [attribute=value]: Targets elements with an exact attribute value.
  [type="checkbox"] {
    display: inline-block;
  }
Enter fullscreen mode Exit fullscreen mode
  • [attribute^=value]: Targets elements where the attribute starts with the specified value.
  [href^="https"] {
    color: green;
  }
Enter fullscreen mode Exit fullscreen mode
  • [attribute$=value]: Targets elements where the attribute ends with the specified value.
  [href$=".pdf"] {
    color: red;
  }
Enter fullscreen mode Exit fullscreen mode
  • [attribute*=value]: Targets elements where the attribute contains the specified value.
  [class*="button"] {
    font-weight: bold;
  }
Enter fullscreen mode Exit fullscreen mode

3. Combinator Selectors

  • Descendant Selector (space): Targets elements inside another element.
  div p {
    color: blue;
  }
Enter fullscreen mode Exit fullscreen mode
  • Child Selector (>): Targets direct child elements of a parent.
  ul > li {
    list-style-type: none;
  }
Enter fullscreen mode Exit fullscreen mode
  • Adjacent Sibling Selector (+): Targets the first element that is immediately preceded by a specified element.
  h2 + p {
    margin-top: 0;
  }
Enter fullscreen mode Exit fullscreen mode
  • General Sibling Selector (~): Targets all elements preceded by a specified element (not necessarily directly).
  h2 ~ p {
    color: green;
  }
Enter fullscreen mode Exit fullscreen mode

4. Pseudo-Classes

  • :hover: Targets elements when they are being hovered by the cursor.
  a:hover {
    text-decoration: underline;
  }
Enter fullscreen mode Exit fullscreen mode
  • :focus: Targets an element that has focus.
  input:focus {
    border-color: blue;
  }
Enter fullscreen mode Exit fullscreen mode
  • :nth-child(n): Targets the nth child of its parent.
  li:nth-child(2) {
    color: red;
  }
Enter fullscreen mode Exit fullscreen mode
  • :nth-of-type(n): Targets the nth child of its type.
  p:nth-of-type(3) {
    font-size: 1.2em;
  }
Enter fullscreen mode Exit fullscreen mode
  • :first-child / :last-child: Targets the first or last child of its parent.
  p:first-child {
    font-weight: bold;
  }
Enter fullscreen mode Exit fullscreen mode
  • :not(selector): Excludes elements that match the selector.
  p:not(.highlight) {
    color: grey;
  }
Enter fullscreen mode Exit fullscreen mode

5. Pseudo-Elements

  • ::before / ::after: Inserts content before or after an element’s content.
  p::before {
    content: "Note: ";
    font-weight: bold;
  }
Enter fullscreen mode Exit fullscreen mode
  • ::first-letter: Targets the first letter of an element.
  p::first-letter {
    font-size: 2em;
  }
Enter fullscreen mode Exit fullscreen mode
  • ::first-line: Targets the first line of text inside an element.
  p::first-line {
    font-style: italic;
  }
Enter fullscreen mode Exit fullscreen mode

6. Grouping Selectors

  • Grouping Selector (,): Applies the same styles to multiple selectors.
  h1, h2, h3 {
    color: blue;
  }
Enter fullscreen mode Exit fullscreen mode

7. Special Combinators

  • Empty Selector (:empty): Targets elements with no children or text.
  div:empty {
    display: none;
  }
Enter fullscreen mode Exit fullscreen mode
  • Enabled/Disabled Selector (:enabled / :disabled): Targets form elements that are enabled or disabled.
  input:enabled {
    background-color: white;
  }

  input:disabled {
    background-color: lightgrey;
  }
Enter fullscreen mode Exit fullscreen mode
  • Checked Selector (:checked): Targets checkboxes or radio buttons that are checked.
  input:checked {
    border-color: green;
  }
Enter fullscreen mode Exit fullscreen mode

8. Advanced Selectors

  • :nth-child(odd) / :nth-child(even): Targets odd or even children.
  tr:nth-child(even) {
    background-color: lightgrey;
  }
Enter fullscreen mode Exit fullscreen mode
  • :nth-last-child(n): Targets the nth child from the end.
  li:nth-last-child(1) {
    color: red;
  }
Enter fullscreen mode Exit fullscreen mode
  • :only-child: Targets an element that is the only child of its parent.
  div:only-child {
    border: 1px solid red;
  }
Enter fullscreen mode Exit fullscreen mode
  • :root: Targets the root element of the document (html).
  :root {
    --main-color: blue;
  }
Enter fullscreen mode Exit fullscreen mode

9. Attribute Presence and Value Selectors

  • [attribute]: Targets elements with the given attribute.
  [required] {
    border: 2px solid red;
  }
Enter fullscreen mode Exit fullscreen mode
  • [attribute^=value]: Targets elements where the attribute starts with a specific value.
  [href^="http"] {
    text-decoration: underline;
  }
Enter fullscreen mode Exit fullscreen mode
  • [attribute$=value]: Targets elements where the attribute ends with a specific value.
  [href$=".pdf"] {
    color: red;
  }
Enter fullscreen mode Exit fullscreen mode
  • [attribute*=value]: Targets elements where the attribute contains a specific value.
  [class*="icon"] {
    background-color: yellow;
  }
Enter fullscreen mode Exit fullscreen mode

10. Other Selectors

  • :lang(language): Matches elements that are of a particular language.
  p:lang(en) {
    color: blue;
  }
Enter fullscreen mode Exit fullscreen mode
  • :target: Targets an element with an id that matches the URL fragment.
  #section:target {
    background-color: yellow;
  }
Enter fullscreen mode Exit fullscreen mode

Conclusion

This cheat sheet covers most CSS selectors, from basic to advanced. Combining them in creative ways allows you to target specific elements efficiently and control the appearance of your web pages with precision.

Top comments (0)