Chapters

CSS Tutorial

CSS Selectors

CSS selectors are one of the most important components in CSS. They define the elements on a webpage that will be styled by a CSS rule. This chapter explores different types of CSS selectors, with examples for each.

What are CSS Selectors?

Selectors are patterns used to target HTML elements for styling. By understanding the various selectors available, you can create more precise and efficient styles.

Types of CSS Selectors

1. Universal Selector (*)

The universal selector targets all elements on a webpage.

Example:

* {
    margin: 0;
    padding: 0;
}

This rule removes all default margins and padding from all elements.

2. Type Selector

The type selector targets specific HTML tags by their name.

Example:

p {
    font-size: 16px;
    color: gray;
}

This styles all <p> elements with a font size of 16px and gray text.

3. Class Selector (.)

The class selector targets elements with a specific class attribute.

Example:

.header {
    background-color: lightblue;
    padding: 20px;
}

HTML:

<div class="header">Welcome to CSS</div>

This applies the styles to any element with the class header.

4. ID Selector (#)

The ID selector targets a single element with a specific id attribute.

Example:

#main {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

HTML:

<div id="main">Main Content Area</div>

IDs are unique and should be used sparingly.

5. Group Selector (,)

The group selector applies the same styles to multiple elements.

Example:

h1, h2, h3 {
    font-family: 'Arial', sans-serif;
    color: navy;
}

This styles all <h1>, <h2>, and <h3> elements similarly.

Advanced Selectors

6. Descendant Selector ()

The descendant selector targets elements nested inside another element.

Example:

div p {
    color: green;
}

HTML:

<div>
    <p>This paragraph is styled.</p>
    <span>This span is not.</span>
</div>

This styles only <p> elements inside <div> tags.

7. Child Selector (>)

The child selector targets direct children of an element.

Example:

ul > li {
    list-style-type: square;
}

HTML:

<ul>
    <li>First Item</li>
    <li>Second Item</li>
</ul>

This styles only direct <li> elements within <ul>.

8. Adjacent Sibling Selector (+)

The adjacent sibling selector targets an element immediately following another.

Example:

h1 + p {
    color: blue;
}

HTML:

<h1>Heading</h1>
<p>This paragraph is styled.</p>
<p>This paragraph is not.</p>

This styles the first <p> after <h1>.

9. General Sibling Selector (~)

The general sibling selector targets all siblings following an element.

Example:

h1 ~ p {
    font-style: italic;
}

HTML:

<h1>Heading</h1>
<p>First paragraph.</p>
<p>Second paragraph.</p>

This styles all <p> elements following <h1>.

10. Attribute Selector

Attribute selectors target elements based on their attributes or attribute values.

Example:

  • Elements with an attribute: [title] { text-decoration: underline; } HTML: <p title="tooltip">Hover over me!</p>
  • Elements with a specific attribute value: [type="text"] { border: 1px solid black; } HTML: <input type="text" placeholder="Enter text"> <input type="password" placeholder="Enter password">

Pseudo-Classes

11. Hover State (:hover)

Applies styles when the user hovers over an element.

Example:

a:hover {
    color: red;
}

HTML:

<a href="#">Hover over me!</a>

12. First Child (:first-child)

Styles the first child of a parent element.

Example:

li:first-child {
    font-weight: bold;
}

HTML:

<ul>
    <li>First Item</li>
    <li>Second Item</li>
</ul>

13. Nth Child (:nth-child(n))

Styles specific children of a parent element based on their order.

Example:

li:nth-child(2) {
    color: purple;
}

HTML:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Practical Example with Multiple Selectors

HTML File:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Selectors</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 id="title">CSS Selectors</h1>
        <p class="intro">Learn how to use different CSS selectors.</p>
        <ul>
            <li>First Item</li>
            <li>Second Item</li>
            <li>Third Item</li>
        </ul>
        <a href="#">Hover over this link!</a>
    </div>
</body>
</html>

CSS File:

/* Universal Selector */
* {
    margin: 0;
    padding: 0;
}

/* ID Selector */
#title {
    color: navy;
    font-size: 24px;
}

/* Class Selector */
.intro {
    font-style: italic;
    color: gray;
}

/* Group Selector */
h1, p {
    text-align: center;
}

/* Hover Pseudo-Class */
a:hover {
    text-decoration: underline;
    color: red;
}

/* Nth-Child Selector */
ul li:nth-child(2) {
    color: green;
}

By understanding and combining CSS selectors, you can create highly customized and efficient styles for your webpages. In the next chapter, we’ll dive into the Box Model to understand how elements are structured on a page.

CSS Selectors

CSS selectors are one of the most important components in CSS. They define the elements on a webpage that will be styled by a CSS rule. This chapter explores different types of CSS selectors, with examples for each.

What are CSS Selectors?

Selectors are patterns used to target HTML elements for styling. By understanding the various selectors available, you can create more precise and efficient styles.

Types of CSS Selectors

1. Universal Selector (*)

The universal selector targets all elements on a webpage.

Example:

* {
    margin: 0;
    padding: 0;
}

This rule removes all default margins and padding from all elements.

2. Type Selector

The type selector targets specific HTML tags by their name.

Example:

p {
    font-size: 16px;
    color: gray;
}

This styles all <p> elements with a font size of 16px and gray text.

3. Class Selector (.)

The class selector targets elements with a specific class attribute.

Example:

.header {
    background-color: lightblue;
    padding: 20px;
}

HTML:

<div class="header">Welcome to CSS</div>

This applies the styles to any element with the class header.

4. ID Selector (#)

The ID selector targets a single element with a specific id attribute.

Example:

#main {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

HTML:

<div id="main">Main Content Area</div>

IDs are unique and should be used sparingly.

5. Group Selector (,)

The group selector applies the same styles to multiple elements.

Example:

h1, h2, h3 {
    font-family: 'Arial', sans-serif;
    color: navy;
}

This styles all <h1>, <h2>, and <h3> elements similarly.

Advanced Selectors

6. Descendant Selector ()

The descendant selector targets elements nested inside another element.

Example:

div p {
    color: green;
}

HTML:

<div>
    <p>This paragraph is styled.</p>
    <span>This span is not.</span>
</div>

This styles only <p> elements inside <div> tags.

7. Child Selector (>)

The child selector targets direct children of an element.

Example:

ul > li {
    list-style-type: square;
}

HTML:

<ul>
    <li>First Item</li>
    <li>Second Item</li>
</ul>

This styles only direct <li> elements within <ul>.

8. Adjacent Sibling Selector (+)

The adjacent sibling selector targets an element immediately following another.

Example:

h1 + p {
    color: blue;
}

HTML:

<h1>Heading</h1>
<p>This paragraph is styled.</p>
<p>This paragraph is not.</p>

This styles the first <p> after <h1>.

9. General Sibling Selector (~)

The general sibling selector targets all siblings following an element.

Example:

h1 ~ p {
    font-style: italic;
}

HTML:

<h1>Heading</h1>
<p>First paragraph.</p>
<p>Second paragraph.</p>

This styles all <p> elements following <h1>.

10. Attribute Selector

Attribute selectors target elements based on their attributes or attribute values.

Example:

  • Elements with an attribute: [title] { text-decoration: underline; } HTML: <p title="tooltip">Hover over me!</p>
  • Elements with a specific attribute value: [type="text"] { border: 1px solid black; } HTML: <input type="text" placeholder="Enter text"> <input type="password" placeholder="Enter password">

Pseudo-Classes

11. Hover State (:hover)

Applies styles when the user hovers over an element.

Example:

a:hover {
    color: red;
}

HTML:

<a href="#">Hover over me!</a>

12. First Child (:first-child)

Styles the first child of a parent element.

Example:

li:first-child {
    font-weight: bold;
}

HTML:

<ul>
    <li>First Item</li>
    <li>Second Item</li>
</ul>

13. Nth Child (:nth-child(n))

Styles specific children of a parent element based on their order.

Example:

li:nth-child(2) {
    color: purple;
}

HTML:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Practical Example with Multiple Selectors

HTML File:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Selectors</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 id="title">CSS Selectors</h1>
        <p class="intro">Learn how to use different CSS selectors.</p>
        <ul>
            <li>First Item</li>
            <li>Second Item</li>
            <li>Third Item</li>
        </ul>
        <a href="#">Hover over this link!</a>
    </div>
</body>
</html>

CSS File:

/* Universal Selector */
* {
    margin: 0;
    padding: 0;
}

/* ID Selector */
#title {
    color: navy;
    font-size: 24px;
}

/* Class Selector */
.intro {
    font-style: italic;
    color: gray;
}

/* Group Selector */
h1, p {
    text-align: center;
}

/* Hover Pseudo-Class */
a:hover {
    text-decoration: underline;
    color: red;
}

/* Nth-Child Selector */
ul li:nth-child(2) {
    color: green;
}

By understanding and combining CSS selectors, you can create highly customized and efficient styles for your webpages. In the next chapter, we’ll dive into the Box Model to understand how elements are structured on a page.