Selectors are patterns that identify (select) HTML elements.
These elements are the ones that will be styled.
Selectors are based on characteristics of the elements.
Common characteristics are: id, class, tag name, and others.
This element gets its style from a class selector named .hilite.
<style>
.hilite {
background: indigo;
color: white;
padding: 20px;
}
</style>
<div class="hilite">
An element styled with a class selector
</div>
The three most common selector types are:
| Selector | Description |
|---|---|
| Class Selectors |
Selects elements based on class value.
|
| Id Selectors |
Selects elements based on id value.
|
| Element Selectors | Selects elements based on tag name. |
A class selector uses a class value to select elements.
Class selectors are prefixed with a period (.).
Typical class names are: .center-text, .btn-rounded, etc.
Unlike ids, classnames can be specified in multiple HTML elements.
The style will be applied to all elements with that classname.
Here we have 3 element types: <div>, <p>, and <section>. They are all styled with the same class selector.
A paragraph styled with a class selector
<style>
.indigo {
background: #3630a3;
color: white;
padding: 10px;
}
</style>
<div class="indigo">
A div styled with a class selector
</div>
<p class="indigo">
A paragraph styled with a class selector
</p>
<section class="indigo">
A section styled with a class selector
</section>
An id selector uses an id value to select an element.
Id selectors are prefixed with a hash or pound sign (#).
Example names include: #sign-up and #product-781.
An id selector is used only on a single element, because id is unique across the page.
This <fieldset> gets its style from an id selector named #customer-form.
<style>
#customer-form {
padding: 20px;
border: 1px solid #6266f1;
background-color: #f6f8ff;
}
#customer-form button {
padding: 10px;
background-color: #6266f1;
color: white;
border: 0;
border-radius: 5px;
}
#customer-form input[type="text"] {
width: 100%;
max-width: 250px;
}
</style>
<form action="/tutorial/action.html">
<fieldset id="customer-form">
<legend>Customer Information</legend>
<label>First Name</label><br />
<input type="text" name="firstname"><br /><br />
<label>Last Name</label><br />
<input type="text" name="lastname"><br /><br />
<label>City</label><br />
<input type="text" name="city"><br /><br />
<label for="insurance">
<input type="checkbox" id="insurance"
name="hasinsurance"
value="hasinsurance">
Has Insurance
</label><br /><br />
<button type="submit">Submit</button>
</fieldset>
</form>
An element selector uses tag names to select elements.
Examples include input, ul, article, button, div, and others.
Element selectors apply the same style across the same element types.
CSS libraries make extensive use of elements selectors for a consistent look and feel.
Three submit <button> elements with the same element style.
<style>
button {
background: none;
border: 2px solid #4238ca;
color: #4238ca;
padding: 12px;
width: 100px;
}
button:hover {
background-color: #4238ca;
color: white;
}
</style>
<form action="/tutorial/action.html"
class="form-buttons">
<button type="submit" name="color" value="apple">Apple</button>
<button type="submit" name="color" value="pear">Pear</button>
<button type="submit" name="color" value="peach">Peach</button>
</form>
