Selectors

Useful in CSS to select specific or multiple tags in our HTML for styling

Tags Selector

  • Select all elements with its tag.
p {
	text-align: center;
	color: red;
}

ID Selector (#)

  • Select one element by its unique ID
#any_name {
  text-align: center;
  color: red;
}

Class Selector (.)

  • Select elements by a class name
.parent {
  /* styles */
}
  • Nested class name selector
<div class="parent father"></div>
.parent.father {
  /* styles */
}

Descendant Selector

  • Descendant class selector
<div class="parent"> 
  <div class="subparent"> 
    <h2 class="text"> Selected </h2>
  </div>
</div> 
.parent .text {
  /* styles */
}

Child Selector (>)

  • Select an element that are direct children of a parent class
<div class="parent"> 
  <div class="subparent"> 
    <h2 class="text"> Selected </h2>
  </div>
</div> 
.parent > .subparent {
  /* .subparent selected ✅ */
}
 
.parent > .text {
  /* .text NO selected ❌ */
}

General Sibling Selector (~)

  • Selects all elements that are siblings of a specified element and come after it in the DOM, not necessarily directly next to it.
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
.box1 ~ .box3 {
  /* box3 selected ✅ */
}

Adjancent Sibling Selector (+)

<div></div>
<p>Hi</p>
div + p {
  /* p selected ✅ */
}

Attribute Selector ([attr=""])

  • Select an element by its attribute
<a href="http://www.umd.edu" title="news">News</a>
a[title="news"] {
	color: red
}

Universal Selector (*)

  • Select all tags with a * symbol
* {
	color: red;
}