CSS Documentation

Selectors

Menu

Selectors

A selector is a component that selects HTML elements. You can use a selector to target HTML elements on a web page.

Example

Here is an example of a selector:

<style>
ㅤ{Element} {
ㅤㅤ{Property}: {Value};
ㅤㅤ{Property}: {Value};
ㅤ}
</style>

Types of Selectors

There are several types of CSS selectors:

  • Element Selector: Selects all elements of a specified type.
  • ID Selector: Selects an element with a specific ID.
  • Class Selector: Selects elements with a specific class.
  • Attribute Selector: Selects elements based on an attribute or attribute value.
  • Pseudo-class Selector: Selects elements based on a certain state.
  • Pseudo-element Selector: Selects and styles a part of an element.

Examples of Different Selectors

/* Element Selector */
p {
ㅤcolor: blue;
}

/* ID Selector */
#header {
ㅤbackground-color: black;
}

/* Class Selector */
.highlight {
ㅤbackground-color: yellow;
}

/* Attribute Selector */
[type="text"] {
ㅤborder: 1px solid gray;
}

/* Pseudo-class Selector */
a:hover {
ㅤcolor: red;
}

/* Pseudo-element Selector */
p::first-line {
ㅤfont-weight: bold;
}

These are just a few examples of the many selectors available in CSS. Understanding and using selectors effectively is key to writing efficient and maintainable CSS code.