CSS Selector Cheatsheet

▶ With CSS we can style our page. You can create patterns to select the specific element you want to style. Here is a CSS Selector Cheatsheet. A combinator is something that explains the relationship between the selectors. A CSS Selector can contain more than one simple selector.

Table of Contents

1. Basic Selectors

**1.1 Universal Selector (*)**

`*` selects all the elements. It targets every single element on the page.

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

This code example is applied to all elements in the page.

1.2 Type Selector

Selects all elements of the given tag name

p {
    color: #fff;
}

All the <p> elements will be converted to red color.

1.3 Class Selector

Class is probably the most used selector in CSS. All browsers support it. Class selectors selects elements of that glass.

.title {
    font-size: 1.8em;
}

1.4 ID Selector

ID selects elements based on elements with that id.

#card {
    height: 100px;
    width: 150px;
}

1.5 Attribute Selector

In HTML, each element has a unique id.

Attributes are more than just class/type as they can have a value to select by.

input[type=text] {
    border: 0;
    border-bottom: 2px solid #233232;
}

Selects all elements that have the given attribute.

2. Grouping selectors

2.1 Descendant Selector

The descendant selector matches all elements that are descendants of the first element.

header nav {
    color: #333;
}

The code selects all <nav> elements inside <header> element.

2.2 Child Selector

The Child Selector selects all elements that are children of a specified element.

header > nav {
    color: #333;
}

The code selects all <nav> elements that are child of <header> element.

2.3 Adjacent Sibling

The adjacent sibling selector is used to select an element that is directly after another specific element.

header + nav {
    color: #333;
}

The code selects the first <nav> element that is placed directly after <header> element.

2.4 General Sibling

The general sibling selector selects all elements that are sibling of a specified element.

header ~ nav {
    color: #333;
}

The code selects all <nav> elements that are siblings of <header> element.

3. Pseudo

The : classes allow the selection of elements based on state information that is not contained in the document tree.

a:visited {
    color: #55c;
}

Read our other blog posts here

CSS Selector Cheatsheet