Note: In this section, we will define CSS selectors, and cover the basic types of selectors. After you have absorbed these four types of selectors, you'll be able to handle 90% of your CSS needs. If you'd like to take a look at the Intermediate and Advanced sections, go for it! But if this is enough for you, feel free to move ahead—you can always come back if you need to.
CSS Selectors Definition: CSS selectors are patterns that target specific HTML elements to apply styles. By using selectors, you can decide exactly which parts of your HTML document you want to style.
Watch the video below to be introduced to basic CSS selectors, or, if you prefer, read the explanation below.
Video Credit: w3school.com - Simple Selectors
There are many types of selectors in CSS, each with a specific purpose. Let’s look at the most commonly used ones:
Targets HTML elements by their tag name.
h1 {
color: blue;
}
This will style all <h1> elements with a blue color.
Targets elements by a specific class. To target a class, start with a dot (.) followed by the class name.
.button {
background-color: green;
}
Styles any element with the class button.
Targets elements with a specific ID. Use a hash (#) followed by the ID name.
#header {
font-size: 20px;
}
Styles the element with the ID header.
Targets all elements on the page.
* {
margin: 0;
padding: 0;
}
Sets all elements to have no margin or padding.
Take a look at the previous four examples of selectors. Does that make sense?
<h2> element or a <p> element. There is no special character used to specify a type selector, you just name the element like this: h2 {style block}. This will style any element <h2> in the HTML.<h2 class="bibliography"> or <p class="bibliography">. You must start this selector with a period (.) like this: .bibliography {style block}. This will style any element that contains the attribute class="name of class" in the HTML.id="identification" such as <h2 id="c01-h2-0003"> or <p id="c01-p-0342">. You must start this selector with a pound/hash (#) like this: #c01-p-0342{style block}. This will style the element that has this id="identification". *) like this: *{style block}. This will style every element.This completes the Basic CSS Selectors portion of the lesson. Continue on if you've fully absorbed the concepts of the basic CSS selectors. If you'd like a reference for these, w3Schools.com has a great repository.
In this section, we'll cover selectors that need slightly more explanation than the basic selectors we covered in the previous section. These include the attribute selector, the pseudo-class selector, and the pseudo-element selector.
Targets elements based on the presence or value of an attribute.
input[type="text"] {
border: 1px solid gray;
}
Styles all <input> elements with a type="text" attribute. This looks like this in the HTML: <input type="text" />. You use the square brackets ([]) after the element to describe the attribute and value. w3Schools.com has a reference for attribute selectors.
Styles elements based on their state, such as hover, focus, or being the first child.
a:hover {
color: red;
}
Changes the color of a link to red when hovered over. This is difficult to show in code because it is based on a state, which can change based on user interaction. This example will change the color of a link to red when the user hovers their mouse over the link. w3Schools.com has a reference for pseudo-classes.
Targets and styles specific parts of an element, like the first letter or the first line.
p::first-line {
font-weight: bold;
}
Makes the first line of all <p> elements bold. This is also difficult to show in code because it is based on a relative attribute of an element, like the first-line or first-letter. This example with make the first line of each paragraph bold. w3Schools.com has a reference for pseudo-elements.
This completes the Intermediate CSS Selectors portion of the lesson. Continue on if you've fully absorbed the concepts of the intermediate css selectors. If you'd like a reference for these, w3Schools.com has a great repository.
When styling multiple elements with the same properties, CSS lets you group selectors to keep your code cleaner and more efficient.
Use commas to apply the same styles to multiple elements. This is useful when you want different selectors to share a style.
h1, h2, p {
color: darkblue;
font-family: Arial, sans-serif;
}
<h1>, <h2>, and <p> elements with the same color and font family. This grouping is very straightforward, simply use a comma to separate a list of elements that you want to style.Targets elements that are descendants of a specific element. A descendant selector is created by placing two selectors side-by-side with a space between them.
div p {
color: gray;
}
<p> elements that are inside <div> elements. Descendants are elements that are inside of a parent element. It doesn't matter how deeply embedded they are. If you think about it using the metaphor of people, children, grandchildren, great-grandchildren are all descendants. w3Schools.com has a reference for combinators.Selects only the direct children of an element. Use the > symbol between selectors.
ul > li {
list-style-type: none;
}
<li> children of <ul> elements, removing their bullet points. Child elements are the first-level elements inside a parent element. Children are descendants, but not all descendants are children. w3Schools.com has a reference for combinators.Selects an element that is immediately after another specific element. Use the + symbol.
h1 + p {
margin-top: 0;
}
<p> element that directly follows an <h1>, removing its top margin. An adjacent sibling is specifically a single element that is directly after it's preceding sibling. w3Schools.com has a reference for combinators.Selects all sibling elements following a specified element. Use the ~ symbol.
h2 ~ p {
color: darkgray;
}
<p> elements that follow an <h2> on the same level, changing their color to dark gray. General siblings are all of the siblings that follow the preceding element. w3Schools.com has a reference for combinators.You can also combine different selectors to create more specific styles.
div.highlight p.note {
color: teal;
font-weight: bold;
}
<p> elements with the class note that are inside a <div> with the class highlight. This is a good example of the manner in which you can combine different types of selectors and different combinators. w3Schools.com has a reference for combinators.By understanding and using CSS selectors and grouping techniques, you can apply precise styles and keep your code cleaner and more efficient.