Intro to CSS Selectors: Use Cases & Examples

About the Author:

Kellye Whitney
Our staff is always looking for the latest news, technologies and trends in the developer training space.
, ,

Intro to CSS Selectors: Use Cases & Examples

There are a few fundamental parts of CSS that you need to understand to get the full range and understanding of the language. Selectors are one of those fundamental principles you need to understand. They define what element will follow a set of CSS rules. They also allow you to target HTML elements to apply an intended style to them. We’re going to look at the varying selectors you can use and what they’re used for.

Basic Selectors

Type selectors identify elements based on how the element has been declared in HTML. A class selector will identify an element on the value of its class attribute. This can be used on many elements to help share with other styles. Another basic selector is the ID selector, which identifies on the ID value, and can only be used once per a web page.

Here is an example of each individual syntax:

span {
  color: #0000FF;

Text will be colored.

#id {
 /*   css statements; */

.class {
 /*   css statements; */

Type selectors can be a great way to change properties unique to a specific HTML element. This could be helpful while dealing with list-style (li), or trying to apply specific elements(e.g. H3, span). Often you won’t rely on this selector that much, as it’s better to use a class instead.

Additional Selectors

Another group of selectors are child selectors. These allow for selected elements that are within one another to follow their parent elements, thus becoming child elements. Child elements can be created in two ways.

An incredibly common and simple way is through using a descendant selector. The descendent will match all elements that follow the first identified parent element. A descendant element doesn’t have to go directly after the parent element. These are created by spacing other elements apart from each other with an additional selector. A new hierarchy is then created. It is much simpler when put into practice and given a concrete example.

Take for example the article h1 selector, the child selector will match all elements that fall inside the article element. It doesn’t matter where the element is originally as long as it is within the range of the article element.

article h1 {  }

This will be selected.

This will be selected.

Pseudo Selectors

Finally we have pseudo selectors. Pseudo-class selectors are similar to a regular class in HTML. They aren’t explicitly stated in the markup, but created through a user’s action or change in the document structure.

These selectors are preceded by a colon in front of them, (:hover) is a common pseudo selector you have probably dealt with before. These represent something that can’t be known by just standalone elements or attributes Take special care to not confuse these with pseudo elements that are recognized with a double colon.

:empty {


Selectors can also be combined together to create even more complex code. This can be done by linking the syntax together or using a couple different combinators that include: ~ + >.

.module > h1 {
  /* Would select all h1 elements that are children of the element in the class. */

Overall, selectors are an important principle in CSS. These few examples are only scratching the services in the amount of selectors that are out there or being refined through the years. Check out a glossary of some of the selectors and each of their individual uses.