Become a CSS Selectors Pro

In this article I will go through an overview and some advanced methods for using CSS Selectors so you can be a pro.

Photo by Pankaj Patel on Unsplash

Overview

CSS Selectors are used when defining your CSS styles and how different styles are applied to specific elements, classes or nested elements or classes. In the most basic cases these can match an element type like a div or span like the example below that is setting the color for all div elements.

div {
  color: black;
}

Basic Selectors

These are your basic building blocks and probably the way you are most familiar with selecting elements in CSS. There are four types of basic selectors.

By Element

This is all your html elements like div, input, span, table, etc.

By Class

This is selecting based on the CSS class of an element or multiple elements. Note the . in front of each of the names.

By Id

This selects any id that is given to an element. Usually this selects only 1 element since you should have a unique id per element. Note the # in front of the names.

By Attribute

This allows you to select based on an attribute of an element. An example is the required attribute that is found on input elements in a form. Note the use of the square brackets around the name of the attribute.

Grouping Selectors

These selectors allow you to select groups of elements and you can mix and match any of the Basic selectors.