What are CSS selectors?
CSS selectors are used to select HTML elements to be styled. CSS selectors select HTML elements based on their id, class, or attributes.
basic selector
Universal selector:
*Symbol is used to select all elements on the page. Most developers will want to reset margins and padding to 0 in order to eliminate the margins and padding provided by the browser by default. This helps maintain consistency across browsers when visiting a website.
grammar:
*{
// 设置元素样式
}
HTML example:
<body>
<h1>通用选择器示例</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
</body>
CSS example:
*{
background: black;
color: white;
font-family: 'Poppins';
}
h1{
text-align: center;
}
Class selector:
Class selectors are used to select all elements belonging to a specific class attribute. In order to select elements with a specific class, use the period (.) character representing the class name, i.e. it will match HTML elements based on the content of the class attribute.
grammar:
.class {
// CSS属性
}
HTML example:
<body>
<div class="intro">
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
<p class="intro">My best friend is Mickey.</p>
</body>
CSS example:
.intro{
background: skyblue;
}
Id selector:
The id selector uses the id attribute of an HTML element to select a specific element. The id of the element in the page is unique, so the id selector is used to select a unique element! To select an element with a specific id, write a pound (#) character followed by the element's id.
grammar:
#idname {
// 样式属性
}
HTML example:
<body>
<p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
</body>
CSS example:
#paragraph{
background: skyblue;
}
Type selector:
The type selector is sometimes called a tag name selector or element selector because it selects HTML tags/elements in the document.
grammar:
element{
// 设置元素样式
}
HTML example:
<body>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</span>
</body>
CSS example:
span{
background: skyblue;
}
group selector
CSS grouping selectors are used to select multiple elements and style them together. This reduces the code and extra work required to declare common styles for every element. To group selectors, separate each selector with a comma.
grammar:
element, element{
// 设置元素样式
}
HTML example:
<body>
<h1>分组选择器示例</h1>
<p>示例CSS选择器。</p>
<h4>示例CSS选择器分组。</h4>
</body>
CSS example:
h1{
text-align: center;
}
p,h4{
background: skyblue;
}
Combiner
Combinators are used to explain relationships between selectors. There are four different combinators in CSS:
- Descendant selector (space)
- Child selector (>)
- Adjacent sibling selector (+)
- Universal sibling selector (~)
Descendant combinator (space)
Descendant combinators, usually represented by a space (" ") character, combine two selectors together such that if the element matched by the second selector has an ancestor element (parent element, parent element) that matches the first selector 's parent element, the parent element's parent element's parent element, etc.), selects them.
grammar:
selector1 selector2 {
/* 属性声明 */
}
HTML example:
<body>
<div>
<p>div中的段落1。</p>
<p>div中的段落2。</p>
<section><p>div中的段落3。</p></section>
</div>
<p>段落4。不在div中。</p>
<p>段落5。不在div中。</p>
</body>
CSS example:
div p{
background: skyblue;
}
subcombinator(>)
Subcombiners use the greater-than sign (>) as a separator between elements. It selects the direct descendants of the parent element. This combinator only matches direct child elements in the document tree. It is more strict than the descendant selector because the second selector will only be selected if the first selector is its parent element.
grammar:
selector1 > selector2
{
// 样式属性
}
HTML example:
<body>
<h1>子组合器示例</h1>
<p>子选择器（>）选择指定元素的所有子元素。</p>
<div>
<p>div中的段落1。</p>
<p>div中的段落2。</p>
<section>
<!-- 不是子元素，但是后代元素 -->
<p>div中的段落3（在section元素内）。</p>
</section>
<p>div中的段落4。</p>
</div>
<p>段落5。不在div中。</p>
<p>段落6。不在div中。</p>
</body>
CSS example:
div>p{
background: skyblue;
}
Adjacent Brothers Combiner (+)
Adjacent sibling combinators use the plus sign (+) as the separator between elements. The second element will only be matched if it immediately follows the first element and they are both children of the same parent element. This sibling selector selects adjacent elements, or we can say, elements located next to the specified tag.
grammar:
former_element + target_element
{
// 样式属性
}
HTML example:
<body>
<h1>相邻兄弟选择器示例</h1>
<p>+选择器用于选择紧跟在另一个特定元素之后的元素。</p>
<div>
<p>div中的段落1。</p>
<p>div中的段落2。</p>
</div>
<p>段落3。在div之后。</p>
<p>段落4。在div之后。</p>
<div>
<p>div中的段落5。</p>
<p>div中的段落6。</p>
</div>
<p>段落7。在div之后。</p>
<p>段落8。在div之后。</p>
</body>
CSS example:
div + p {
background: skyblue;
}
Universal sibling combinator (~)
The universal sibling combinator uses the tilde (~) as a separator between elements. It selects elements that follow the first selector element and are all children of the same parent element. It can be used to select groups of elements that have a common parent element.
grammar:
former_element ~ target_element
{
// 样式属性
}
HTML example:
<body>
<h1>通用兄弟组合器示例</h1>
<p>通用兄弟选择器（~）选择指定元素的所有下一个兄弟元素。</p>
<p>段落1。</p>
<div>
<p>段落2。</p>
</div>
<p>段落3。</p>
<code>一些代码。</code>
<p>段落4。</p>
</body>
CSS example:
div ~ p {
background-color: skyblue;
}
Pseudo selector
Pseudo class:
Use the colon (:) when the element's state changes due to user interaction.
grammar:
selector:pseudo-class
{
// property: value;
}
Commonly used pseudo-classes include:
- :focus
- :required
- :checked
- :disabled
- :hover
- :visited
- :active
These pseudo-classes relate to the position of elements in the document tree:
- :root
- :first-child
- :last-child
- :only-child
- :nth-child(n)
- :nth-last-child(n)
- :not(selector)
Pseudo elements:
The double colon (::) is used to style a specific part of the selected element.
grammar:
selector::pseudo-element
{
// property: value;
}
Commonly used pseudo-elements include:
- ::after
- ::before
- ::first-line
- ::first-letter (:first-letter)
- ::first-line (:first-line)
- ::file-selector-button
attribute selector
CSS attribute selectors match elements based on the presence or value of a given attribute.
[attr] represents an element with the attr attribute name.
[attr=value] represents an element with attr attribute name and value exactly value.
[attr~=value] represents an element with an attr attribute name and a value that is a space-separated list of words, one of which happens to be value.
[attr|=value] means an element with an attr attribute name and the value can be exactly value, or it starts with value and is followed by a hyphen. It is commonly used for language subcode matching.
[attr^=value] represents an element with an attr attribute name and a value prefixed (prefixed) with value.
[attr$=value] represents an element with an attr attribute name and a value with value as the suffix (suffix).
[attr*=value] represents an element with an attr attribute name and a value that contains at least one occurrence of value.
[attr operator value i] Adding i (or I) before the closing bracket causes a case-insensitive comparison of the values (for characters in the ASCII range).