Guide to CSS Selectors
Get to know CSS Selectors in the easiest possible way....
Table of contents
No headings in the article.
CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
- Simple selectors (select elements based on name, id, class)
- Combinator selectors (select elements based on a specific relationship between them)
- Pseudo-class selectors (select elements based on a certain state)
- Pseudo-elements selectors (select and style a part of an element)
- Attribute selectors (select elements based on an attribute or attribute value)
Simple Selector
The CSS element Selector The element selector selects HTML elements based on the element name.
p { text-align: center; color: red; }
The CSS class Selector The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name.
.center {
text-align: center;
color: red;
}
- The CSS id Selector The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.
#para1 {
text-align: center;
color: red;
}
-The CSS Universal Selector The universal selector (*) selects all HTML elements on the page.
* {
text-align: center;
color: blue;
}
-The CSS Grouping Selector The grouping selector selects all the HTML elements with the same style definitions. Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
CSS Combinators
-Descendant Selector The descendant selector matches all elements that are descendants of a specified element. The following example selects all
elements inside
div p {
background-color: yellow;
}
- Child Selector (>)
The child selector selects all elements that are the children of a specified element.
The following example selects all
elements that are children of a
element:
div > p {
background-color: yellow;
}
- Adjacent Sibling Selector (+) The adjacent sibling selector is used to select an element that is directly after another specific element.
Sibling elements must have the same parent element, and "adjacent" means "immediately following".
The following example selects the first
element that are placed immediately after
div + p { background-color: yellow; }
- General Sibling Selector (~) The general sibling selector selects all elements that are next siblings of a specified element.
The following example selects all
elements that are next siblings of
div ~ p {
background-color: yellow;
}
CSS Pseudo-classes
- Anchor Pseudo-classes Links can be displayed in different ways:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
- Pseudo-classes and HTML Classes
a.highlight:hover { color: #ff0000; }
-Hover on
div:hover {
background-color: blue;
}
-Simple Tooltip Hover
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
- CSS - The :first-child Pseudo-class
p:first-child {
color: blue;
}
- CSS - The :lang Pseudo-class
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
CSS Pseudo-elements
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
Style the first letter, or line, of an element Insert content before, or after, the content of an element
selector::pseudo-element {
property: value;
}
CSS Attribute Selectors The [attribute] selector is used to select elements with a specified attribute.
The following example selects all elements with a target attribute:
a[target] {
background-color: yellow;
}