CSS Selectors

There are many different types of CSS selectors. They define the elements in HTML document and apply CSS rules to them. Therefore, we can split them in two groups: Basic selectors and Attribute selectors. In this blog post we will mention the most important basic selectors:

Universal Selector * selects all elements in document. This selector is used in combination with other selectors, also it can select elements inside another element. For example:

* {
background: green;
}

Element Selector {} also known as type selector. This selector selects all element names. For example: h3, h4, h5{} targets the <h3>, <h4> and <h5> elements.

h2 {
color: red; /*all <h2> elements are red */
} 

Class Selector . selects an element whose class attribute has a value that matches value specified after the “dot”. Inside the same HTML document you can use same class as much as you want. For example:

.test{
text-decoration:italic;
color: blue;
}

ID Selector # selects an element whose ID has a value, that matches the value specifide after puond sign. Compared to Class selector, you can’t use same ID more than once. For example:

#test{
color: yellow;
}