CSS Selectors: Targeting Elements for Styling
CSS selectors are used to target specific HTML elements that you want to style.
Here are some of the most commonly used CSS selectors:
Element Selector
Targets all instances of a specific HTML element.
As an example:
p {
/* CSS styles go here */
}
- This selector targets all
<p>
elements on a webpage.
Class Selector
Targets all instances of an HTML element with a specific class.
As an example:
.intro {
/* CSS styles go here */
}
- This selector targets all elements with the class "intro", like this:
<p class="intro">...</p>
ID Selector
Targets a specific HTML element with a unique ID.
As an example:
#header {
/* CSS styles go here */
}
- This selector targets the element with the ID "header", like this:
<div id="header">...</div>
Attribute Selector
Targets elements with a specific attribute or attribute value.
As an example:
input[type="text"] {
/* CSS styles go here */
}
- This selector targets all
<input>
elements with the "type" attribute set to "text".
Descendant Selector
Targets elements that are descendants of a specific element.
As an example:
ul li {
/* CSS styles go here */
}
- This selector targets all
<li>
elements that are descendants of a<ul>
element.
Adjacent Sibling Selector
Targets an element that is immediately after another element.
As an example:
h2 + p {
/* CSS styles go here */
}
- This selector targets the
<p>
element that immediately follows an<h2>
element.
Universal Selector
Targets all elements on the page.
As an example:
* {
/* CSS styles go here */
}
- This selector targets all elements on the page.
Child Selector
Targets elements that are direct children of a specific element.
As an example:
ul > li {
/* CSS styles go here */
}
- This selector targets all
<li>
elements that are direct children of a<ul>
element.
hover Pseudo-class Selector
Targets an element when the user hovers over it with their cursor.
As an example:
button:hover {
/* CSS styles go here */
}
- This selector targets a
<button>
element when the user hovers over it with their cursor.
The :nth-child()
Pseudo-class Selector
Targets elements based on their position within a parent element.
As an example:
li:nth-child(even) {
/* CSS styles go here */
}
- This selector targets all even-numbered
<li>
elements within a parent element.
The :not()
Pseudo-class Selector
Targets elements that do not match a specific selector.
As an example:
input:not([type="submit"]) {
/* CSS styles go here */
}
- This selector targets all
<input>
elements that do not have a"type"
attribute with the value"submit"
.