Selectors

Selectors

In CSS, selectors are used to target HTML elements and apply styles to them. There are different types of selectors that can be used to target elements based on their type, class, ID, or other attributes.

Element Selector

The element selector is used to target all elements of a specific type. It is defined by the element name without any additional characters.

<p>This is a paragraph.</p>

The code above shows an example of the element selector. In this example, the <p> element is targeted using the element selector, and the color of the text is set to red.

Class Selector

The class selector is used to target elements with a specific class. It is defined by a period (.) followed by the class name. This selector is useful when you want to apply the same style to multiple elements. This is generally the most common selector used in CSS.

<p>This is a <span class="highlight">paragraph</span>.</p>

The code above shows an example of the class selector. In this example, the <span> element with the class highlight is targeted using the class selector, and the background color is set to yellow.

ID Selector

The ID selector is used to target a specific element with a unique ID. It is defined by a hash (#) followed by the ID name. This selector is used when you want to apply a style to a single element on the page.

<p id="intro">This is an introduction.</p>

The code above shows an example of the ID selector. In this example, the <p> element with the ID intro is targeted using the ID selector, and the font size is set to 24 pixels.

Universal Selector

The universal selector is used to target all elements on the page. It is defined by an asterisk (*) character. This selector is used when you want to apply a style to all elements on the page.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

The code above shows an example of the universal selector. In this example, the universal selector is used to apply a style to all elements on the page, setting the margin, padding, and box-sizing properties.

Pseudo-classes

Pseudo-classes are used to define a special state of an element. They are defined by a colon (:) followed by the pseudo-class name. Pseudo-classes are used to style elements based on user interaction or element state.

<a href="https://www.github.com/godkingjay" target="_blank">Visit GitHub</a>

The code above shows an example of pseudo-classes. In this example, the <a> element is targeted using the pseudo-classes :link, :hover, :active, and :visited, which define the styles for the link in different states.

Pseudo-elements

Pseudo-elements are used to style a specific part of an element. They are defined by a double colon (::) followed by the pseudo-element name. Pseudo-elements are used to style elements based on their position or content.

<p>Velit sit ad aliquip laborum labore. Excepteur tempor ad duis Lorem. Aute labore dolor dolor aliqua eiusmod pariatur ut duis deserunt esse velit.</p>

The code above shows an example of pseudo-elements. In this example, the <p> element is targeted using the pseudo-elements ::first-line, ::first-letter, ::before, and ::after, which style the first line, first letter, and add content before and after the paragraph.

Code Editor