List of CSS Selectors

CSS Selectors are what enable you to target HTML elements for style information.

• Elements
• Class
• ID
• Attribute
• Pseduo-class

Elements

Elements in HTML like <p> <div> <form> <input> etc.

Can be targeted like this.

p {
    color: red;
}

form {
    color: green;
}

input {
    color: blue;
}

Here are some of the elements that are valid to target.

• h1, h2, h3, h4, h5, h6
• p
• form
• input
• div
• span

For a full list, check out https://www.w3schools.com/tags/ref_html_dtd.asp

Class

elements that have class=”class_name” set in their attributes. Any .class_name rules will apply to all elements that have the same class_name

ID

Similar to the class, id is set as an attribute on an element. But the ID is supposed to be unique. Most browsers will allow websites to set multiple elements with the same id, but it’s not actually correct. ID’s are targeted with #important_form

Attribute

Selecting based on attributes set on elements. For example:

/* 
    Will target all required input tags.
    Following this format
    Element[Attribute="value"]
 */
input[required="required"]

Attributes also support != ~= $= and ^=