learn css for free

Types of CSS Selectors

There are several types of CSS selectors, each with its own use case and syntax. These are:

• Universal selector
• Type selector
• Class selector
• ID selector
• Attribute selector
• Pseudo-class selector
• Pseudo-element selector

Universal Selector

The universal selector is represented by an asterisk (*) and it selects all elements on a web page. It is often used to apply a common style to all elements, such as setting a default font or margin.

* {
    margin: 0;
    padding: 0;
}

Type Selector

The type selector targets elements based on their HTML tag name. For example, using the selector "p" will select all paragraph elements on the page. This is useful for applying styles to specific types of elements.

p {
    color: blue;
    font-size: 18px;
}

Class Selector

The class selector is used to select elements that have a specific class attribute. It is denoted by a period (.) followed by the class name. For example, ".my-class" will select all elements with the class "my-class". This allows for styling multiple elements with the same class.

.my-class {
    background-color: yellow;
}

ID Selector

The ID selector targets a single element based on its unique ID attribute. It is represented by a hash (#) followed by the ID name. For example, "#my-id" will select the element with the ID "my-id". Since IDs should be unique within a page, this selector is used for styling specific elements.

#my-id {
    color: red;
}

Attribute Selector

The attribute selector allows you to select elements based on the presence or value of their attributes. For example, "[type='text']" will select all input elements with a type attribute of "text". This is useful for targeting elements with specific attributes.

input[type="text"] {
    border: 2px solid black;
}

Pseudo-Class Selector

The pseudo-class selector targets elements based on their state or position in the document. For example, ":hover" applies styles when an element is hovered over, and ":first-child" selects the first child of a parent element. Pseudo-classes are useful for adding interactivity and styling based on user actions.

button:hover {
    background-color: green;
}

Pseudo-Element Selector

The pseudo-element selector allows you to style specific parts of an element, such as the first letter or line of text. For example, "::first-letter" targets the first letter of a block of text, and "::before" can be used to insert content before an element. Pseudo-elements are useful for adding decorative elements and enhancing the visual presentation of content.

p::first-letter {
    font-size: 32px;
    font-weight: bold;
}