We use cookies to enhance your experience on the site
Privacy Policy
OK
CodeWorlds

Advanced CSS Selectors

Creating CSS selectors can be done in many ways. Here is a list of some advanced selectors:

*

1* {
2  color: red;
3}

This selector applies to every element on the page or, if preceded by a parent, to every element inside that parent.

#

1#myid {
2  color: red;
3}

The ID selector selects an HTML element with a specific identifier. It's recommended to use classes for styling, but sometimes you can style a single, unique element.

element + element

This selector refers to an adjacent element. It will select the element that appears directly after the previously mentioned element.

1h2 + p {
2  font-size: 18px;
3}

Here, the paragraph right after the <h2> heading will have a font size of 18px.

element > element

This selector selects only direct children - those that are exactly one level below the parent selector.

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

Only direct children of <div> will be colored blue.

element ~ element

This selector refers to sibling elements. It will select elements that appear after the previously mentioned element at the same level.

1h2 ~ p {
2    font-weight: bold;
3}

All paragraphs after the <h2> heading at the same level will be bold.

element[attribute] / element[attribute="value"]

The HTML attribute selector allows styling elements that have a specific attribute, e.g., href, or those whose href attribute value equals "https://google.com".

In HTML, there are several other types of attribute selectors that can be used in CSS for precise selection and styling of elements:

  • a[href*="google"] - The asterisk (*) means that the specified value must appear anywhere in the attribute value. For example, this selector will select all links (

    <a>
    ) whose href attribute contains the word "google", regardless of whether it is at the beginning, middle, or end of the attribute value.

  • a[href^="http"] - The ^ symbol means that the specified value must appear at the beginning of the attribute value. For example, this selector will select all links whose href attribute starts with "http". This will apply to both "http" and "https".

  • a[href$=".com"] - The dollar sign ($) means that the specified value must appear at the end of the attribute value. For example, this selector will select all links whose href attribute ends with ".com". This will apply to URLs with the ".com" domain.

  • a[data-="value"] - The asterisk () allows selecting all elements that have a custom attribute value starting with "data-" equal to "value". This can be used to create custom data attributes and style the corresponding elements.

  • a[foo~="bar"] - The tilde (~) allows selecting an attribute that has different values separated by spaces. For example, this selector will select elements whose "foo" attribute has the value "bar" or the value "bar" appears as one of several space-separated words.

  • a:not(selector) - A negation pseudo-class that selects all elements except those specified inside the :not() parentheses. For example, this selector will select all links (

    <a>
    ) that do not have the class specified in the selector inside :not().

With these attribute selectors, you can more precisely select elements on the page and customize their styling depending on attribute values.

Exercise: Advanced CSS Selectors

In this exercise, you will learn how to use advanced CSS selectors for precise styling of elements on a page. Your task will be to create a web page with various elements styled using these selectors.

Step 1: Create a Basic HTML Document Structure

First, create a new HTML file and add a basic HTML document structure. Add various elements that will be styled using advanced CSS selectors.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Link the CSS file -->
7  <title>Advanced CSS Selectors</title>
8</head>
9<body>
10  <h2>Heading 2</h2>
11  <p>Paragraph after heading 2</p>
12  <div id="parent">
13    <p>Direct child of div</p>
14    <span>Span inside div</span>
15  </div>
16  <h2>Heading 2</h2>
17  <p>Paragraph after another heading 2</p>
18  <a href="https://example.com">Link to Example</a>
19  <a href="https://google.com">Link to Google</a>
20  <a href="https://example.com">Another link to Example</a>
21  <ul>
22    <li>First list item</li>
23    <li>Second list item</li>
24    <li>Third list item</li>
25  </ul>
26</body>
27</html>

Step 2: Create a CSS File

Open or create a new CSS file and save it as 

styles.css
.

Step 3: Universal Selector

Add a style for the universal selector 

*
to change the text color to red.

1/* Universal selector */
2* {
3  color: red;
4}

Step 4: ID Selector

Add a style for the element with the 

#parent
identifier to change the background color.

1/* ID selector */
2#parent {
3  background-color: lightgray;
4  padding: 10px;
5}

Step 5: Adjacent Sibling Selector

Add a style for the paragraph (

<p>
) that appears directly after the 
<h2>
heading to change the font size.

1/* Adjacent sibling selector */
2h2 + p {
3  font-size: 18px;
4}

Step 6: Child Selector

Add a style for the direct children of the 

<div>
element to change the text color.

1/* Child selector */
2div > p {
3  color: blue;
4}

Step 7: General Sibling Selector

Add a style for all paragraphs (

<p>
) that appear after the 
<h2>
heading at the same level to change the font weight.

1/* General sibling selector */
2h2 ~ p {
3  font-weight: bold;
4}

Step 8: Attribute Selector

Add a style for links (

<a>
) with a specific href attribute to change their color.

1/* Attribute selector */
2a[href*="google"] {
3  color: green;
4}

Result

After completing all steps, your HTML and CSS files should look like this:

HTML File (index.html)

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Link the CSS file -->
7  <title>Advanced CSS Selectors</title>
8</head>
9<body>
10  <h2>Heading 2</h2>
11  <p>Paragraph after heading 2</p>
12  <div id="parent">
13    <p>Direct child of div</p>
14    <span>Span inside div</span>
15  </div>
16  <h2>Heading 2</h2>
17  <p>Paragraph after another heading 2</p>
18  <a href="https://example.com">Link to Example</a>
19  <a href="https://google.com">Link to Google</a>
20  <a href="https://example.com">Another link to Example</a>
21  <ul>
22    <li>First list item</li>
23    <li>Second list item</li>
24    <li>Third list item</li>
25  </ul>
26</body>
27</html>

CSS File (styles.css)

1/* Universal selector */
2* {
3  color: red;
4}
5
6/* ID selector */
7#parent {
8  background-color: lightgray;
9  padding: 10px;
10}
11
12/* Adjacent sibling selector */
13h2 + p {
14  font-size: 18px;
15}
16
17/* Child selector */
18div > p {
19  color: blue;
20}
21
22/* General sibling selector */
23h2 ~ p {
24  font-weight: bold;
25}
26
27/* Attribute selector */
28a[href*="google"] {
29  color: green;
30}

Experiment Further

  1. Add more elements with different selectors to better understand how different selectors work.
  2. Try adding more styles to your page, e.g., changing colors, sizes, and other CSS properties.
  3. Test your skills by creating more complex layouts using different selectors.

After completing this exercise, you should better understand how to use different advanced selectors in CSS to precisely style elements on a page.

As Mohamed would say: "CSS selectors are like precise hieroglyphs - the more accurately you point to an element, the better control you have over it. Every scribe must know all the symbols!"

Test advanced selectors in the editor below:

Go to CodeWorlds→