CSS Selectors

CSS selectors are patterns used to select the elements you want to style.

Types of CSS Selectors

Universal Selector: *
Type Selector: div
Class Selector: .class-name
ID Selector: #id-name
Attribute Selector: [type="text"]

Playground

Experiment with different CSS selectors in the code editor below - you will see the changes in the preview area:

<h1>Types Playground Preview</h1>

<p>This is a paragraph</p>

Remember, that attribute selectors depend on the presence of the specified attribute in the HTML elements. For example, in the playground, you can select the <a> element using the attribute selector [target="_blank"]. You can even use the class and id attributes as CSS selectors by using [class] and [id], however, it is a lot quicker and easier to use the shorthand characters ('#' for id and '.' for class selectors).

Back to Home