IT Course CSS Basics 020_Selectors

Selectors

Selectors are used to select elements in a document that need to be styled. Through different selection patterns, they tell the browser which elements should apply which styles.

ID Selector (#)

Selects an element by its unique ID. ID selectors should ensure uniqueness in the document; the same ID should not be reused.

Example:

1
#myID {
2
  /* style rules */
3
}

Class Selector (.)

Selects elements by their class name. Class selectors can be used for multiple elements, and a single element can have multiple classes.

Example:

1
.myClass {
2
  /* style rules */
3
}

Element Selector (p, h1)

Selects elements by the HTML element name. Element selectors will select all matching elements in the document.

Example:

1
p {
2
  /* style rules */
3
}

Universal Selector (*)

Selects all elements in the document. The universal selector should be used with caution as it matches all elements and affects performance.

Example:

1
* {
2
  /* style rules */
3
}

Attribute Selector ([type="text"])

Selects elements by their attribute value. Attribute selectors can select elements based on different attribute values.

Example:

1
input[type="text"] {
2
  /* style rules */
3
}

Pseudo-class Selector

Selects special states or positions of elements. Pseudo-class selectors are used to select interactive states of elements, such as hover, visited, etc.

Example:

1
a:hover {
2
  /* style rules */
3
}

Pseudo-element Selector

Selects special parts of elements. Pseudo-element selectors are used to select virtual parts of elements, such as the first line, first letter, etc.

Example:

1
p::first-line {
2
  /* style rules */
3
}

Child Selector

Selects direct child elements of an element. The child selector only selects direct children, not descendants.

Example:

1
ul > li {
2
  /* style rules */
3
}

General Sibling Selector

Selects all sibling elements that share the same parent as the specified element. The general sibling selector selects all sibling elements after the specified element, without requiring adjacency.

Example:

1
h2 ~ p {
2
  /* style rules */
3
}

Adjacent Sibling Selector

Selects the sibling element immediately following the specified element. The adjacent sibling selector selects the sibling element immediately after the specified element.

Example:

1
h2 + p {
2
  /* style rules */
3
}

Descendant Selector

Selects all descendant elements under an element. The descendant selector selects all descendants under the specified element, including deeply nested elements.

Example:

1
div p {
2
  /* style rules */
3
}

Union Selector (,)

Combines multiple selectors together to select all elements matching any of the selectors. The union selector is used to simultaneously select multiple different types of elements and apply the same style rules.

Example:

1
h1, h2, h3 {
2
  /* style rules */
3
}

Selector List

Lists multiple selectors in order of priority, selecting the most matching one. Selector lists allow selecting multiple elements according to different selector combinations to meet different conditional styling needs.

Example:

1
div p,
2
.myClass,
3
#myID {
4
  /* style rules */
5
}

Selector Naming Rules

• Selector names must be strings composed of letters, numbers, underscores, or hyphens.

• Selector names must start with a letter or underscore.

• Selector names cannot start with a number.

• Selector names cannot contain spaces.

  Recommendations:

• Use meaningful names: Selector names should clearly reflect the purpose or function of the selected elements.

• Follow naming conventions: Use consistent naming conventions, such as camelCase or hyphen-separated naming, to improve code consistency.

• Avoid meaningless abbreviations: Avoid using overly short or meaningless abbreviations so that other developers can understand the meaning of selectors.

• Follow semantics: Use semantic selectors to improve code readability and maintainability.