CSS Selectors

CSS selectors are patterns used to match elements within an HTML document. Associated style rules will be applied to elements that match the selector pattern.

What is a selector

Selectors are one of the most important aspects of CSS because they are used to select elements on web pages to set styles. Selectors can be defined in multiple ways.

Universal selector

Universal selector (using*Asterisks or asterisks represent) matching each individual element on the page. If there are other conditions on the target element, the universal selector can be omitted. This selector is usually used to remove default margins and padding from elements for quick testing.

*　{
　　　　margin: 0;
　　　　padding: 0;
　　}

*Selector internal style rules will apply to each element in the document.

Element type selector

Element type selectors match each example in the document tree with the corresponding element type name.

p {
　　　　color: blue;
　　}

pSelector style rules will apply to<p>each element in the document, and make its color blue, regardless of its position in the document tree.

ID selector

ID selectors are used to setsingleoruniqueelement defines style rules.

The definition of an ID selector is a hash mark (#），followed by the ID value.

#error {
　　　　color: red;}

This style rule willidelements whose attribute is set to appear in rederror.

class class selector

Class selectors can be used to select elements withclassany HTML element with the attribute. All elements with this class will be formatted according to the defined rules.

a period (.）immediately followed by the class value definition of the class selector.

.blue {
　　　　color: blue;
　　　　　　}

The above style rules willclasstext displayed for each element in the document whose attribute is set to appear in blueblue. You can make it more specific. For example:

p.blue {
　　　　color: blue;
　　　　}

selector style rulesp.blueonly<p>setsclasselements whose attribute is set to appear in blueblueand have no effect on other paragraphs.

Descendant selector

When you need to select an element that is a descendant of another element, you can use these selectors. For example, if you only want to locate those anchor points within the unordered list without locating all anchor elements.

ul.menu li a {
　　　　text-decoration: none;
　　　　}
h1　em {
　　　　color: green;
　　　　}

Selector internal style rulesul.menu li aonly applies to<a>containing the classunordered listthose which are anchor elements.menuand have no effect on other links within the document. Similarly,h1 emThe style rules within the selector only apply to<em>elements contained within the heading<h1>.

Child selector

Child selectors can only be used to select elements that are direct children of certain elements. Child selectors consist of two or more selectors, separated by a greater-than sign (i.e.>separated. For example, you can use these selectors to select the first-level list elements in lists with multiple levels of nesting.

ul > li {
　　　　list-style: square;
　　　　}
ul > li ol {
　　　　list-style: none;
　　　　}

Selector internal style rulesul > lionly applies to<li>as<ul>elements that are direct children of the element and have no effect on other list items.

Adjacent Sibling Selector

Adjacent sibling selectors can be used to select sibling elements. The syntax of the selector is similar to: E1 + E2, where E2is the target of the selector.

h1 + pThe selector in the following example<p>only in<h1>and<p>element shares the same parent in the document tree and<h1>immediately following the<p>element before the element is selected. This means that only each<h1>Paragraphs after the title only have associated style rules.

h1　+　p {
　　　　color: blue;
　　　　font-size:　18px;
　　　　}
ul.task　+　p {
　　　　color: #f0f;
　　　　text-indent:　30px;
　　　　}

General Sibling Selector

General Sibling Selector1 + E2）is similar, but not as strict. The general sibling selector is composed of two simple selectors, which are separated by a tilde (〜）characters are separated. It can be written as: E1〜E2, where E2is the target of the selector.

The selector in the following exampleh1 ~ pwill be selected<p>before the element<h1>All elements that share the same parent element in the document tree.

h1　~ p {
　　　　color: blue;
　　　　font-size:　18px;
　　　　}
ul.task ~ p {
　　　　color: #f0f;
　　　　text-indent:　30px;
　　　　}

There are more selectors, such as attribute selectors, pseudo-classes, and pseudo-elements. We will discuss these selectors in the following chapters.

Grouped Selectors

Multiple selectors in the style sheet usually share the same style rule declarations. You can group them into a comma-separated list to minimize the code in the style sheet. It can also prevent you from repeating the same style rules over and over again.

h1　{
　　　　font-size:　36px;
　　　　font-weight: normal;
　　　}
h2　{
　　　　font-size:　28px;
　　　　font-weight: normal;
　　　}
h3　{
　　　　font-size:　22px;
　　　　font-weight: normal;
　　　}

As you can see in the example above, the same style rulesfont-weight: normal;is shared by selectionh1,h2andh3Therefore, it can be divided into a comma-separated list, as shown below:

h1, normal2, normal3　{font-weight: normal;}
h1　{font-size:　36px;}
h2　{font-size:　28px;}
h3　{font-size:　22px;}