Using Selectors in CSS

The process of applying styles to specific web page elements is rooted in CSS selectors. Understanding these selectors helps you create lightweight, systematic, and easy-to-manage stylesheets. In this section, you will look at commonly used CSS selectors.

Element selectors target all instances of a specific HTML element. By using an element selector, you can apply styles to every occurrence of the targeted element on a web page.

Refer to the following code snippet.

1234
p {
font-size: 16px;
color: #333;
}

In this example, the p selector targets all paragraph (<p>) elements on the web page. The font-size property is set to 16px, and the color property is set to a dark gray (#333).

Class selectors target elements with a specific class attribute. They are useful for styling groups of elements that share a common purpose or visual style. Class selectors are defined by a period (.) followed by the class name.

Refer to the following code snippet.

1234
.warning {
color: red;
font-weight: bold;
}

In this example, the .warning class selector targets all elements with the class "warning". The color property is set to red, and the font-weight property is set to bold, making the text stand out.

ID selectors target a single element with a specific ID attribute. They are used for styling unique elements that appear only once on a web page. ID selectors are defined by a hash symbol (#) followed by the ID name.

Refer to the following code snippet.

1234
#header {
background-color: #007bff;
padding: 20px;
}

In this example, the #header ID selector targets the element with the ID "header". The background-color property is set to a shade of blue (#007bff), and the padding property is set to 20px, adding space around the content within the header.

Attribute selectors target elements with specific attributes or attribute values. They can be used to style elements based on their attributes, such as input fields with specific types or elements with specific data attributes.

Refer to the following code snippet.

1234
input[type="text"] {
border: 1px solid #ccc;
padding: 5px;
}

In this example, the input[type="text"] attribute selector targets all input elements with a "type" attribute value of "text". The border property is set to a 1px solid light gray (#ccc), and the padding property is set to 5px, providing some space around the input text.

Pseudo-class selectors target elements in specific states or positions. They allow you to style elements based on user interaction, such as hover, focus, or active states, or based on the structure of the document, such as first-child or nth-child.

Refer to the following code snippet.

123
a:hover {
color: #0056b3;
}

In this example, the a:hover pseudo-class selector targets all anchor (<a>) elements when the user hovers over them. The color property is set to a darker shade of blue (#0056b3) to provide visual feedback.

Descendant selectors target elements that are descendants of another element. By combining selectors, you can create complex relationships and style elements based on their position within the HTML structure.

Refer to the following code snippet.

1234
nav ul {
list-style-type: none;
padding: 0;
}

In this example, the nav ul descendant selector targets all unordered list (<ul>) elements that are descendants of a navigation (<nav>) element. The list-style-type property is set to none, removing the default list markers, and the padding property is set to 0, removing the default padding.

Child selectors target direct children of a specific element. Unlike descendant selectors, they only target immediate children and not deeper descendants.

Refer to the following code snippet.

1234567891011121314151617
.container > .child {
background-color: #f8f8f8;
margin: 10px;
padding: 20px;
}


.container > .child > p {
color: #333;
font-size: 18px;
}


.container > .child > p > span {
color: #007bff;
font-weight: bold;
}

In this example, we use child selectors to target specific elements within the .container element.

1. The .container > .child selector targets direct children of the .container element with the .child class. The background-color property is set to a light gray (#f8f8f8), and the margin and padding properties are set to 10px and 20px, respectively.

2. The .container > .child > p selector targets paragraph (<p>) elements that are direct children of the .child elements within the .container. The color property is set to a dark gray (#333), and the font-size property is set to 18px.

3. The .container > .child > p > span selector targets span (<span>) elements that are direct children of the paragraph elements within the .child elements inside the .container. The color property is set to a shade of blue (#007bff), and the font-weight property is set to bold.

By understanding and mastering different types of CSS selectors, you can create efficient, organized, and maintainable stylesheets. Element, class, ID, attribute, pseudo-class, and descendant selectors are fundamental tools for targeting and styling specific elements on a web page, enabling you to create sophisticated designs and layouts.