Selector Types
CSS selectors are part of CSS syntax that determine which HTML elements CSS rules will be applied to.
Universal selector
The universal selector is denoted by * (asterisk), and its characteristic is that it selects all elements. This selector is commonly used when resetting styles.
Example
|
1 2 3 4 |
*{ margin: 0; padding: 0; } |
Defined by HTML element type
These are the simplest selectors and are defined by the name of the HTML element they target.
Example
|
1 2 3 4 5 |
p { margin-right: 0rem; padding-right: 0.5rem; text-align: justify; } |
or
|
1 2 3 4 5 |
blockquote { margin-left: $leva_margina; color: #1c6c9f; font-weight: 100; } |
Defined by element class
These selectors “target” HTML elements that contain a specific class.
Example
|
1 |
<a id="super_link" class="klasa_linkovi" href="http://neka_stranica.com"<</a> |
A selector that targets a class is denoted with . (dot) before the class name.
|
1 2 3 |
.klasa_linkovi{ color: red; } |
Defined by element ID
These selectors “target” HTML elements that contain a specific ID. They are denoted with the # sign before the ID name.
Example
|
1 |
<a id="super_link" class="klasa_linkovi" href="http://neka_stranica.com"<</a> |
A selector that targets an element with a specific ID is denoted with the # sign before the ID.
|
1 2 3 |
#super_link{ padding: 1em; } |
