CSS selector Type Summary

1. Universal selector

It is generally used to make some general style settings for all elements, such as clearing inner margin, outer margin, etc. However, the efficiency is relatively low, so try not to use it.

* {
  margin: 0;
  padding: 0;
}

2. Element selector

Also called "label selector", it is used to select a type of label for style setting.

div { color: #ff0000; }
span { font-size: 18px; }

3. Class selector

Add a class attribute to the element through Class attribute value to select the element.

An element can have multiple class values, and each class value is separated by a space;
If the class value is composed of multiple words, the words can be underlined, Hump identification can also be used;
It is better not to use the tag name as the class value;

.box {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}

<div class="box"></div>

4.id selector

Add an ID attribute to the element and select the element by #id attribute value.

The id value in an HTML document is unique and cannot be repeated;
If the id value is composed of multiple words, the words can be underlined with a middle dash -, an underscore, Hump identification can also be used;
It is better not to use the tag name as the value of id;

#container { color: #ff0000; }

<div id="container"></div>

5. Attribute selector

[attr]: select the element with attr attribute;

/* Select the element that has the title attribute */
[title]: { color: #ff0000; }

<div title="one">content</div>

[attr=val]: select the element whose attr attribute value is exactly equal to val;

/* Select the element whose title value is exactly equal to one */
[title="one"] { color: #ff0000; }

<div title="one">content</div>

[attr*=val]: select the element whose attr attribute value contains the word val;

/* title The attribute value contains the element of the word one */
[title*="one"] { color: #ff0000; }

<div title="one">Content 1</div>
<p title="aaaone">Content 2</p>
<span title="one-two">Content 3</span>

[attr^=val]: select the element whose attr attribute value starts with val;

/* title An element whose attribute value begins with the word one */
[title^="one"] { color: #ff0000; }

<div title="one">Content 1</div>
<span title="one-two">Content 2</span>
<p title="one two">Content 3/p>

[attr|=val]: select the element whose attr attribute value is exactly equal to val or starts with the word val followed by the hyphen -;

/* title An element whose attribute value is exactly equal to one or begins with the word one followed by a hyphen - */
[title|="one"] { color: #ff0000; }

<div title="one">Content 1</div>
<span title="one-two">Content 2</span>

[attr~=val]: select the element whose attr attribute value contains the word val (words must be separated by spaces);

/* title The attribute value contains the element of the word one (the word one must be separated from other words by spaces) */
/* The effect is similar to the class selector */
[title~="one"] { color: #ff0000; }

<div title="one">Content 1</div>
<p title="one two">Content 2</p>

[attr$=val]: select the element whose attr attribute value ends with the word val;

/* title An element whose attribute value ends with the word one */
[title$="one"] { color: #ff0000; }

<div title="two-one">Content 1</div>
<p title="two one">Content 2</p>

6. Descendant selector

Select the child elements under the specified element, including direct and indirect child elements, separated by spaces.

/* Select all span elements under div */
div span { color: #ff0000; }

<div>
  <span>Text content 1</span>
  <p>
    <span>Text content 2</span>
  </p>
</div>

7. Descendant selector

Select the direct child element under the specified element, excluding indirect child elements, and use >.

/* Select the direct span element under the div element */
div > span { color: #ff0000; }

<div>
  <span>Text content 1</span>
</div>

8. Brother selector

Adjacent sibling selector +: select the sibling element immediately after an element;

/* div The p element immediately after the element */
div + p { color: #ff0000; }

<div></div>
<p>content</p>

Full sibling selector ~: select the sibling element behind an element, which does not need to be next to it;

/* div p element after element */
div ~ p { color: #ff0000; }

<div></div>
<p>Content 1</p>
<p>Content 2</p>

9. Intersection selector

Select elements that meet multiple criteria at the same time.

/* Select the div element with class one */
div.one { color: #ff0000; }

/* Select the div element with class one and title attribute value equal to one */
div.one[title="one"] { color: #ff0000; }

<div class="one" >Content 1</div>
<div class="one" title="one">Content 2</div>

10. Union selector

Different selection conditions, middle, connection, all selected.

/* All div elements + all elements with one class value + all elements with one title attribute value */
div, .one, [title="one"] { color: #ff0000; }

<div>Content 1</div>
<span title="one">Content 2</span>
<p class="one">Content 3</p>

11. Pseudo class selector

11.1. Dynamic pseudo class

: link: a:link unreached links;
: visited: a:visited links;
: hover: a:hover move the mouse over the link;
: active: a:active activated link (press and hold the mouse on the link without releasing it);
: focus: the element that currently has input focus (can receive keyboard input, generally input);

Note:

: hover must be placed after: link and: visited to be fully effective;
: active must be placed after: hover to be fully effective;
Suggested writing order: link, visited, focus, hover, active;
Handle element a, and: hover and: active can also be used for other elements;

11.2. Target pseudo class and language pseudo class

Target pseudo class:: target;
Language pseudo class:: lang;

11.4. Element state pseudo class

: enabled: available;
: disable: disabled;
: checked: selected;

11.5. Structural pseudo class

: nth child (n): the nth child element in the parent element (n represents any positive integer and 0, or even and odd);
```
/* Select the first element with p under all parent elements */
p:nth-child(1) { color: #ff0000; }
```

: nth last child (n): Contrary to: nth child, the penultimate child element in the parent element;

/* Select the element with the penultimate p under the parent element */
p:nth-last-child(1) { color: #ff0000; }

/* Select the last two elements with p */
p:nth-last-child(-n + 2)  { color: #ff0000; }

Nth of type (n): only elements of the same type are calculated during counting;

/* Select the second p element of all p elements under the parent element */
p:nth-of-type(2) { color: #ff0000; }

: nth last of type (n): calculate elements of the same type from back to front;

/* Select the penultimate p element of all p elements under the parent element */
p:nth-last-of-type(2) { color: #ff0000; }

: first child: equivalent to: nth child (1);
: last child: equivalent to: nth last child (1);
: first of type: equivalent to: nth of type (1);
: last of type: equivalent to: nth last of type (1);
: only child: is the only child element in the parent element;
: only of type: it is the only element of the specified type in the parent element;
: Empty: an element that is completely empty and does not contain child elements and content;
: root: the root element, which is the html element;

11.6. Negative pseudo class

The format of: not() is: not(x) represents elements other than x (X represents a simple selector, which can be element, general, attribute, class, id, pseudo class (except negative pseudo class) selector, etc.).

/* All p elements under the selected parent element are not the first and last p elements */
p:not(:first-of-type):not(:last-of-type) { color: #ff0000; }

Note: not() only supports simple selectors, but does not support composite selectors, such as intersection and union selectors.

Keywords: Front-end css3 html css

Added by Tsukasa on Sun, 19 Dec 2021 07:36:26 +0200

Programming VIP

CSS selector Type Summary