CSS Selectors

Introduction

In the world of web development, styling HTML elements is a fundamental task. CSS (Cascading Style Sheets) provides us with powerful tools to select and style these elements. Understanding how to effectively use CSS selectors is crucial for creating well-structured and visually appealing websites.

CSS selectors allow you to target specific HTML elements and apply styles to them. By mastering selectors, you can control the appearance of your web pages with precision. In this tutorial, we will explore various types of CSS selectors and learn how to use them effectively.

Concept

Basic Selectors

1. Element Selector: Targets all elements of a specified type.
2. ID Selector: Targets an element with a specific ID.
3. Class Selector: Targets all elements with a specified class.
4. Universal Selector: Targets all elements on the page.

Element Selector

The element selector targets all elements of a specified type. For example, to style all <p> (paragraph) elements, you would use:

1p {
2color: blue;
3}

This will change the text color of all paragraph elements to blue.

ID Selector

The ID selector targets an element with a specific ID. IDs should be unique within a page. To target an element with the ID header, you would use:

1#header {
2background-color: yellow;
3}

This will change the background color of the element with the ID header to yellow.

Class Selector

The class selector targets all elements with a specified class. Classes can be reused across multiple elements. To target all elements with the class highlight, you would use:

1.highlight {
2font-weight: bold;
3}

This will make the text of all elements with the class highlight bold.

Universal Selector

The universal selector targets all elements on the page. It is represented by an asterisk (*). To apply a basic reset to all elements, you might use:

1* {
2margin: 0;
3padding: 0;
4}

This will remove default margins and paddings from all elements.

Combinators

Combinators are used to combine multiple selectors in order to target more specific elements. Here are some common combinators:

1. Descendant Selector: Targets elements that are descendants of another element.
2. Child Selector: Targets elements that are direct children of another element.
3. Adjacent Sibling Selector: Targets an element that is immediately preceded by another element.
4. General Sibling Selector: Targets elements that are siblings of another element.

Descendant Selector

The descendant selector targets elements that are descendants of another element. For example, to target all <p> elements inside a <div>, you would use:

1div p {
2color: green;
3}

This will change the text color of all paragraph elements inside any div to green.

Child Selector

The child selector targets elements that are direct children of another element. It is represented by a greater-than sign (>). To target only <p> elements that are direct children of a <div>, you would use:

1div > p {
2color: red;
3}

This will change the text color of all paragraph elements that are direct children of any div to red.

Adjacent Sibling Selector

The adjacent sibling selector targets an element that is immediately preceded by another element. It is represented by a plus sign (+). To target a <p> element that immediately follows a <h1>, you would use:

1h1 + p {
2font-size: 20px;
3}

This will increase the font size of any paragraph element that immediately follows an h1.

General Sibling Selector

The general sibling selector targets elements that are siblings of another element. It is represented by a tilde (~). To target all <p> elements that follow a <h1>, you would use:

1h1 ~ p {
2font-style: italic;
3}

This will make the text of any paragraph element that follows an h1 italic.

Attribute Selectors

Attribute selectors target elements based on their attributes. Here are some common attribute selectors:

1. [attribute]: Targets elements with a specified attribute.
2. [attribute=value]: Targets elements with a specified attribute and value.
3. [attribute~=value]: Targets elements with an attribute that contains a specific word.
4. [attribute^=value]: Targets elements with an attribute that starts with a specific value.
5. [attribute$=value]: Targets elements with an attribute that ends with a specific value.

[attribute]

The [attribute] selector targets elements with a specified attribute. For example, to target all <a> elements with the href attribute, you would use:

1a[href] {
2text-decoration: none;
3}

This will remove the underline from all links that have an href attribute.

[attribute=value]

The [attribute=value] selector targets elements with a specified attribute and value. For example, to target all <input> elements with the type="text", you would use:

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

This will add a black border to all text input fields.

[attribute~=value]

The [attribute~=value] selector targets elements with an attribute that contains a specific word. For example, to target all <img> elements with the alt attribute containing the word "logo", you would use:

1img[alt~="logo"] {
2width: 100px;
3}

This will set the width of all images that have an alt attribute containing the word "logo" to 100 pixels.

[attribute^=value]

The [attribute^=value] selector targets elements with an attribute that starts with a specific value. For example, to target all <a> elements with the href attribute starting with "http", you would use:

1a[href^="http"] {
2color: purple;
3}

This will change the text color of all links that start with "http" in their href attribute to purple.

[attribute$=value]

The [attribute$=value] selector targets elements with an attribute that ends with a specific value. For example, to target all <a> elements with the href attribute ending with ".pdf", you would use:

1a[href$=".pdf"] {
2font-weight: bold;
3}

This will make the text of all links that end with ".pdf" in their href attribute bold.

Examples

Let's put some of these selectors into practice. Consider the following HTML:

1<div id="main-content">
2<h1>Welcome to My Website</h1>
3<p class="highlight">This is a highlighted paragraph.</p>
4<p>This is a regular paragraph.</p>
5<div class="inner">
6  <p>Another paragraph inside a div.</p>
7</div>
8</div>

Now, let's apply some CSS using the selectors we've learned:

1#main-content {
2background-color: lightgray;
3}
4 
5h1 {
6color: navy;
7}
8 
9.highlight {
10font-weight: bold;
11}
12 
13p {
14margin-bottom: 10px;
15}
16 
17div p {
18color: green;
19}
20 
21div > p {
22border-left: 2px solid blue;
23}
24 
25h1 + p {
26font-size: 20px;
27}
28 
29img[alt~="logo"] {
30width: 100px;
31}

The resulting styles will be:

• The #main-content div will have a light gray background.
• The <h1> element will have navy text color.
• All elements with the class highlight will have bold text.
• All paragraph elements will have a bottom margin of 10 pixels.
• All paragraph elements inside any div will have green text.
• All direct child paragraph elements of any div will have a blue left border.
• The paragraph immediately following an <h1> will have a font size of 20 pixels.
• Any image with the alt attribute containing the word "logo" will have a width of 100 pixels.

What's Next?

Now that you understand how to select HTML elements with CSS, the next step is to learn about the CSS Box Model. The box model is essential for controlling the layout and spacing of elements on your web pages.

Stay tuned for more tutorials on CSS fundamentals!