[CSS] Basic / Grouping Selector

Basic Selectors

Universal Selector

The * selects all elements.

We use this selector for applying some property globally.

 

Here is the usage.

* {
  margin: 0;
}

 

Type Selector

The type selector selects all elements that have the specified HTML tag name.

 

Here is the usage.

div {
  width: 10px;
}

span {
  font-size: 12px;
}

h1 {
  color: teal;
}

ID Selector

The ID selector selects an element that has the id attribute with the same value.

There should be only one ID in a document.

 

This is an example.

<div id="container"></div>

#container {
  background-color: tomato;
}

Class Selector

The class selector selects all elements that have the class attribute with the same value.

 

This is an example.

<span class="foo"></span>
<p class="foo"></p>

.foo {
  padding: 5px;
}

Attribute Selector

The attribute selector selects all elements that have the given attribute.

element[attribute]

This selector selects all elements with an attribute.

element[attribute=value]

This selector selects all elements with an attribute that has the same value.

element[attribute~=value]

This selector selects all elements with an attribute that contain the same word as the value.

The words are separated by white-space.

element[attribute|=value]

This selector selects all elements with an attribute starting with the same word as the value.

The words can be separated by -(hyphen).

element[attribute^=value]

This selector selects all elements with an attribute starting with the value.

element[attribute$=value]

This selector selects all elements with an attribute ending with the value.

element[attribute*=value]

This selector selects all elements with an attribute including the value.

element[attribute operator value i/s]

Adding an i or I before the closing square bracket causes the value to be compared case-insensitively.

Adding an s or S before the closing square bracket causes the value to be compared case-sensitively.

 

This is some examples.

a[href^="https" s] {
  color: tomato;
}

a[href$=".com"] {
  color: seagreen;
}

a[href^="https" s][href$=".com"] {
  color: steelblue;
}

a[href*="example" i] {
  color: teal;
}

Grouping Selector

You can select elements with multiple selectors.

The selectors need to be connected by ,(comma).

 

Here is the usage.

header, section {
  font-weight: 600;
}