HTML and CSS Workshop

# Other Selector Types

Aside from class selectors, HTML elements can also be styled using different types of selectors.

# Universal Selector

The universal selector (opens new window) matches elements of any type.

* {
  color: red;
}

# Type Selector

Type selectors (opens new window) matches elements by type, or element name. In CSS, the selector is simply just the name of the element.

<h1>HTML and CSS Workshop</h1>

h1 {
  color: red;
}

# Attribute Selector

Attribute selectors (opens new window) matches elements based on the presence or value of a given attribute.

<img src="avatar.jpg" /> <input type="text" />

[alt] {
  display: none;
}

[type='text'] {
  display: none;
}

The first CSS above matches all elements that have an src attribute, regardless of their value.

The second CSS rule matches all elements that have a type attribute, and the attribute value should be set to text.

# ID Selector

ID selectors (opens new window) matches an element based on the value of the element's id (opens new window) attribute.

<h1 id="title">HTML and CSS Workshop</h1>

#title {
  color: red;
}

# Combining Multiple Selectors

All selector types can be combined with each other to target specific elements if needed.

<input type="text" id="first-name" class="form-field" />

input[type='text']#first-name.form-field {
  display: none;
}

As long as there is no space between the different selectors, an element will have to match all of the selectors in order for the CSS rule to apply to it.

← Linking To Other Pages →