Advanced CSS Selectors

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

* - Universal Selector

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

* {
  color: red;
}

Here every element on the page gets red text.

# - ID Selector

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.

#myid {
  color: red;
}

This rule changes the color of just one element: the one with the id="myid" attribute.

element element - Descendant Selector

A space between selectors means "inside": the rule reaches every element matching the second selector that lies anywhere inside an element matching the first one - at any nesting level.

div p {
  color: brown;
}

Here every paragraph inside a <div> turns brown, including one nested deeper, e.g. in a <section> inside that div. Paragraphs outside divs won't change. The child selector > described below is narrower: it works only on direct children.

element + element - Adjacent Sibling Selector

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

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

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

element > element - Child Selector

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

div > p {
    color: blue;
}

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

element ~ element - General Sibling Selector

This selector refers to sibling elements. It will select elements that appear after the previously mentioned element at the same level. Unlike +, which takes only the nearest sibling, ~ selects all the siblings that follow.

h2 ~ p {
    font-weight: bold;
}

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".

CSS has several other types of attribute selectors 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-category="papyrus"] - selects elements whose custom data-category attribute is "papyrus". You can invent data-* attributes yourself, but the selector needs the full name: CSS has no wildcard for part of an attribute name, and the browser reads [data-*="value"] as an attribute named data- with the *= operator.

• 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.

<!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="styles.css"> <!-- Link the CSS file -->
  <title>Advanced CSS Selectors</title>
</head>
<body>
  <h2>Heading 2</h2>
  <p>Paragraph after heading 2</p>
  <div id="parent">
    <p>Direct child of div</p>
    <span>Span inside div</span>
  </div>
  <h2>Heading 2</h2>
  <p>Paragraph after another heading 2</p>
  <a href="https://example.com">Link to Example</a>
  <a href="https://google.com">Link to Google</a>
  <a href="https://example.com">Another link to Example</a>
  <ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
  </ul>
</body>
</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.

/* Universal selector */
* {
  color: red;
}

Step 4: ID Selector

Add a style for the element with the #parent identifier to change the background color.

/* ID selector */
#parent {
  background-color: lightgray;
  padding: 10px;
}

Step 5: Adjacent Sibling Selector

Add a style for the paragraph (<p>) that appears directly after the <h2> heading to change the font size.

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

Step 6: Child Selector

Add a style for the direct children of the <div> element to change the text color.

/* Child selector */
div > p {
  color: blue;
}

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.

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

Step 8: Attribute Selector

Add a style for links (<a>) with a specific href attribute to change their color.

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

Result

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

HTML File (index.html)

The whole page from step 1, unchanged:

<!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="styles.css"> <!-- Link the CSS file -->
  <title>Advanced CSS Selectors</title>
</head>
<body>
  <h2>Heading 2</h2>
  <p>Paragraph after heading 2</p>
  <div id="parent">
    <p>Direct child of div</p>
    <span>Span inside div</span>
  </div>
  <h2>Heading 2</h2>
  <p>Paragraph after another heading 2</p>
  <a href="https://example.com">Link to Example</a>
  <a href="https://google.com">Link to Google</a>
  <a href="https://example.com">Another link to Example</a>
  <ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
  </ul>
</body>
</html>

CSS File (styles.css)

All the rules from steps 3-8 in one file:

/* Universal selector */
* {
  color: red;
}

/* ID selector */
#parent {
  background-color: lightgray;
  padding: 10px;
}

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

/* Child selector */
div > p {
  color: blue;
}

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

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

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:

<!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>Advanced CSS selectors</title>
</head>
<body>
  <h2>Heading 2</h2>
  <p>Paragraph after heading 2</p>
  <div id="parent">
    <p>Direct child of div</p>
    <span>Span inside div</span>
  </div>
  <h2>Heading 2</h2>
  <p>Paragraph after another heading 2</p>
  <a href="https://example.com">Link to Example</a>
  <a href="https://google.com">Link to Google</a>
  <a href="https://example.com">Another link to Example</a>
  <ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
  </ul>
</body>
</html>