CSS Exercises - Various CSS Selectors

In this set of CSS exercises, we will practice creating and using various CSS selectors such as:

  • Type selectors
  • Pseudo-classes
  • Pseudo-elements
  • Combinators

1. Type selectors (View solution)

Create an external stylesheet and define several CSS rules using type selectors. Create an HTML file with several common HTML elements, and use the external stylesheet to style those elements.

  • Define h1, p, and div type selectors in the style.css file.
  • Define h1, p, and div elements in the index.html file and use the rules from the style.css file to style those elements.

2. Pseudo-classes (View solution)

Create an external style.css stylesheet that uses pseudo-classes to style:

  • A link element being hovered over.
  • A visited link element.
  • A link element with the my-class class being hovered over.
  • A visited link element with the my-class class.

Create an HTML page that links to this stylesheet and:

  • Defines a link element (a).
  • Defines a link element (a) with a my-class class attribute.

3. Pseudo-elements (View solution)

Create an external style.css stylesheet that:

  • Uses the ::before pseudo-element to style the content before each list item (li) element.
  • Uses the ::before pseudo-element to style the content before the link's text.
  • Uses the ::after pseudo-element to style the content after the link's text.
  • Uses pseudo-elements together with a class selector.

Create an HTML page that links to this stylesheet and uses it to style:

  • The before boxes of all list item (li) elements.
  • The before and after boxes of a link (a) element.
  • Just the before box of an element with a class attribute.
  • Just the after box of an element with a class attribute.

4. Selector lists and combinators (View solution)

Create an external style.css stylesheet that:

  1. Uses a selector list to apply the same CSS rule to multiple elements.
  2. Uses combinators to apply a CSS rule to descendant elements.

Solutions

1. Type selectors - solution

The style.css file:

h1 {
    color: red;
}

p {
    color: green;
}

div {
    color: blue;
}

The index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>My Page Title</title>
</head>
<body>
    <h1>This h1 element is styled using the h1 type selector.</h1>
    <p>This paragraph is styled using the p type selector.</p>
    <div>This div is styled using the div type selector.</div>
</body>
</html>

Explanation

In this exercise, we used the h1, p, and div type selectors from the style.css external stylesheet to automatically select and style all the corresponding h1, p, and div HTML elements in the index.html file. A type selector in the stylesheet selects elements based on their names.

2. Pseudo-classes - solution

The style.css file:

a:hover {
    text-decoration: none;
}

a:visited {
    color: brown;
}

.my-class {
    margin: 10px;
    padding: 10px;
    display: block;
    width: 100px;
    color: white;
    background-color: darkgreen;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
}

.my-class:hover {
    background-color: green;
}

.my-class:visited {
    color: orange;
}

The index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>My Page Title</title>
</head>
<body>
    <a href="#">Regular link</a>
    <a class="my-class" href="#">Styled link</a>
</body>
</html>

Explanation

In this exercise, we created a style.css stylesheet that uses :hover and :visited pseudo-classes to style different states of our links. First, we styled a regular link (a) being hovered over:

a:hover {
    text-decoration: none;
}

And when it has been visited:

a:visited {
    color: brown;
}

Then, we created a .my-class rule and used the :hover, and :visited pseudo-classes to style that link when it is hovered over:

.my-class:hover {
    background-color: green;
}

And when it has been visited:

.my-class:visited {
    color: orange;
}

Finally, we created an HTML page with two (a) link elements: one regular link and one link with the my-class class attribute:

<a href="#">Regular link</a>
<a class="my-class" href="#">Styled link</a>

When we hover over these elements, or if the link has been visited, the appropriate pseudo-class rule will be applied to the element.

3. Pseudo-elements - solution

The style.css file:

li {
    list-style-type: none;
}

li::before {
    content: "✓";
    margin-right: 10px;
    display: inline-block;
    color: green;
}

a::before {
    content: "«";
    margin-right: 10px;
}

a::after {
    content: "»";
    margin-left: 10px;
}

.previous::before {
    content: "‹";
    margin-right: 10px;
}

.next::after {
    content: "›";
    margin-left: 10px;
}

The index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>My Page Title</title>
</head>
<body>
    <ul>
        <li>This is the first list item.</li>
        <li>This is the second list item.</li>
        <li>This is the third list item.</li>
    </ul>

    <a href="#">A link with before and after boxes</a>
    <div class="previous">An element with the before box</div>
    <div class="next">An element with the after box</div>
    
</body>
</html>

In this exercise, we created a CSS rule that uses the ::before pseudo-element to put a green checkmark symbol in front of every list item element:

li::before {
    content: "✓";
    margin-right: 10px;
    display: inline-block;
    color: green;
}

Then, we used the ::before and ::after pseudo-elements applied to the a link element to specify the content that comes before and after the link's text:

a::before {
    content: "«";
    margin-right: 10px;
}

a::after {
    content: "»";
    margin-left: 10px;
}

Finally, we used the ::before pseudo-element on a .previous class to specify the character that comes before the element's content/text. Here, the before box holds a ‹ character:

.previous::before {
    content: "‹";
    margin-right: 10px;
}

And we used the ::after pseudo-element selector to target the after box on all elements with a next class. In this case, the after box will hold a › character:

.next::after {
    content: "›";
    margin-left: 10px;
}

4. Selector lists and combinators - solution

The style.css file:

/* Selector lists */
.my-class, .my-other-class {
    color: green;
}

/* Combinators */
.my-wrapper p {
    font-style: italic;
}

.my-wrapper div {
    font-weight: bold;
}

The index.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>My Page Title</title>
</head>

<body>
    <div class="my-wrapper">
        <p class="my-class">This paragraph is a descendant element.</p>
        <p class="my-class">This paragraph is also a descendant element.</p>
        
        <div class="my-other-class">This div is a descendant element.</div>
        <div class="my-other-class">This div is also a descendant element.</div>
    </div>
</body>

</html>

Explanation

In this exercise, we applied the same green text CSS rule to both the .my-class and .my-other-class selectors using a comma-separated selector list:

/* Selector lists */
.my-class, .my-other-class {
    color: green;
}

All HTML elements having either the my-class or the my-other-class class, will have their text styled as a green text. In our case, we have two paragraphs with the my-class class, and two div elements with the my-other-class class:

<p class="my-class">This paragraph is a descendant element.</p>
<p class="my-class">This paragraph is also a descendant element.</p>

<div class="my-other-class">This div is a descendant element.</div>
<div class="my-other-class">This div is also a descendant element.</div>

Next, we use the space combinator to target all descendant p elements whose ancestor element has the my-wrapper class:

.my-wrapper p {
    font-style: italic;
}

Now, all descendant paragraphs within our <div class="my-wrapper"> ancestor element:

<div class="my-wrapper">
    <p class="my-class">This paragraph is a descendant element.</p>
    <p class="my-class">This paragraph is also a descendant element.</p>

    <!-- Other elements -->
</div>

Will have italicized text.

Next, we use a CSS combinator to target all the descendant div elements of the .my-wrapper ancestor:

.my-wrapper div {
    font-weight: bold;
}

This rule targets all descendant div elements within the <div class="my-wrapper"> ancestor element:

<div class="my-wrapper">
    <!-- Other elements -->

    <div class="my-other-class">This div is a descendant element.</div>
    <div class="my-other-class">This div is also a descendant element.</div>
</div>

And styles their text as bold.

For more information about these selectors, check out our Introduction to CSS Selectors and CSS - Other Selectors tutorials.