# 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.