Learn CSS So That Your Site Doesn’t Look Like Garbage

CSS Selectors

Learn CSS So That Your Site Doesn’t Look Like Garbage

CSS Selectors

• CSS Selector : Applies styles to a specific DOM element(s), there are various types:
• Type Selectors : Matches by node name.
• Class Selectors : Matches by class name.
• ID Selectors : Matches by ID name.
• Universal Selectors : Selects all HTML elements on a page.
• Attribute Selectors : Matches elements based on the prescence or value of a given attribute. (i.e. a[title] will match all a elements with a title attribute)

/* Type selector */
div {
  background-color: #000000;
}/* Class selector */
.active {
  color: #ffffff;
}/* ID selector */
#list-1 {
  border: 1px solid gray;
}/* Universal selector */
* {
  padding: 10px;
}/* Attribute selector */
a[title] {
  font-size: 2em;
}

Class Selectors

• Used to select all elements of a certain class denoted with a .[class name]
• You can assign multiple classes to a DOM element by separating them with a space.

Compound Class Selectors

• To get around accidentally selecting elements with multiple classes beyond what we want to grab we can chain dots.
• TO use a compound class selector just append the classes together when referencing them in the CSS.

<div class="box yellow"></div>
<div class="box orange"></div>
<div class="circle orange"></div>

• i.e. .box.yellow will select only the first element.