CSS Selectors¶

We have introduced simple CSS selectors in the first chapter, in this chapter, we will introduce the rest four type of selectors

Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)

nth-child Selectors¶

CSS Combinators¶

Reference

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS:

descendant selector (space)
child selector (>)
adjacent sibling selector (+)

general sibling selector (~)

Selector	Example	Example description
element element	div p	Selects all <p> elements inside <div> elements
element>element	div > p	Selects all <p> elements where the parent is a <div> element
element+element	div + p	Selects the first <p> element that are placed immediately after <div> elements
element1~element2	p ~ ul	Selects every <ul> element that are preceded by a <p> element

Descendant Selector¶

The descendant selector matches all elements that are descendants of a specified element.

The following example selects all <p> elements inside <div> elements:
Descendant Selector: Selects all elements that are descendants (children, grandchildren, etc.) of a specified element.
```
div p {
background-color: yellow;
}
```

Child Selector (`>`)¶

The child selector selects all elements that are the children of a specified element.

The following example selects all <p> elements that are children of a
element:
Child Selector (>): Selects only the direct children of a specified element.
```
div > p{
    background-color: yellow;
}
```

Adjacent Sibling Selector (`+`)¶

The adjacent sibling selector is used to select an element that is directly after another specific element.
Sibling elements must have the same parent element, and adjacent means immediately following.
The following example selects the first <p> element that are placed immediately after <div> elements:
```
div + p {
  background-color: yellow;
}
```

General Sibling Selector (`~`)¶

The general sibling selector selects all elements that are next siblings of a specified element.
The following example selects all <p> elements that are next siblings of <div> elements:
```
div ~ p {
background-color: yellow;
}
```

CSS Pseudo-classes¶

A pseudo-class is used to define a special state of an element.
For example, it can be used to:
1. Style an element when a user mouses over it
2. Style visited and unvisited links differently
3. Style an element when it gets focus

Syntax

selector:pseudo-class {
property: value;
}

Anchor Pseudo-classes¶

Links can be displayed in different ways:

/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */
a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}

Hover¶

Pseudo-classes can be combined with HTML classes:
When you hover over the link in the example, it will change color:
```
a.highlight:hover {
color: #ff0000;
}
```
An example of using the :hover pseudo-class on a <div> element to implement a simple tooltip Hover

first-child Pseudo-class¶

The :first-child pseudo-class matches a specified element that is the first child of another element.
In the following example, the selector matches any <p> element that is the first child of any element:
```
p:first-child {
color: blue;
}
```
In the following example, the selector matches the first <i> element in all <p> elements:
```
p i:first-child {
color: blue;
}
```
In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element:
```
p:first-child i {
color: blue;
}
```

The `:lang` Pseudo-class¶

The :lang pseudo-class allows you to define special rules for different languages.
In the example below, :lang defines the quotation marks for <q> elements with lang="no"

All CSS Pseudo Classes¶

Selector	Example	Example description
:active	a:active	Selects the active link
:checked	input:checked	Selects every checked <input> element
:disabled	input:disabled	Selects every disabled <input> element
:empty	p:empty	Selects every <p> element that has no children
:enabled	input:enabled	Selects every enabled <input> element
:first-child	p:first-child	Selects every <p> element that is the first child of its parent
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent
:focus	input:focus	Selects the <input> element that has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects <input> elements with a value within a specified range
:invalid	input:invalid	Selects all <input> elements with an invalid value
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute value starting with "it"
:last-child	p:last-child	Selects every <p> element that is the last child of its parent
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a <p> element
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
:only-child	p:only-child	Selects every <p> element that is the only child of its parent
:optional	input:optional	Selects <input> elements with no "required" attribute
:out-of-range	input:out-of-range	Selects <input> elements with a value outside a specified range
:read-only	input:read-only	Selects <input> elements with a "readonly" attribute specified
:read-write	input:read-write	Selects <input> elements with no "readonly" attribute
:required	input:required	Selects <input> elements with a "required" attribute specified
:root	:root	Selects the document's root element
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all <input> elements with a valid value
:visited	a:visited	Selects all visited links

CSS Pseudo-elements¶

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

Style the first letter, or line, of an element
Insert content before, or after, the content of an element

Syntax

selector::pseudo-element {
property: value;
}

All CSS Pseudo Elements¶

Selector	Example	Example description
::after	p::after	Insert content after every <p> element
::before	p::before	Insert content before every <p> element
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
::marker	::marker	Selects the markers of list items
::selection	p::selection	Selects the portion of an element that is selected by a user

`::first-line` Pseudo-element¶

The ::first-line pseudo-element is used to add a special style to the first line of a text.
The following example formats the first line of the text in all <p> elements:
The ::first-line pseudo-element can only be applied to block-level elements.

CSS Attribute Selectors¶

The [attribute] selector is used to select elements with a specified attribute.

Selector	Example	Example description
[attribute]	[target]	Selects all elements with a target attribute
[attribute=value]	[target="_blank"]	Selects all elements with target="_blank"
[attribute~=value]	[title~="flower"]	Selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower"
[attribute^=value]	a[href^="https"]	Selects all <a> elements with a href attribute value starting with "https"
[attribute$=value]	a[href$=".pdf"]	Selects all <a> elements with a href attribute value ending with ".pdf"
[attribute*=value]	a[href*="w3schools"]	Selects all <a> elements with a href attribute value containing the substring "w3schools"

The following example selects all <a> elements with a target attribute:

CSS [attribute="value"] Selector¶

The [attribute="value"] selector is used to select elements with a specified attribute and value.
The following example selects all <a> elements with a target="_blank" attribute:
```
a[target="_blank"] {
background-color: yellow;
}
```

CSS [attribute~="value"] Selector¶

The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word.
The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower":

Hands-on Task¶

Objective¶

Gain practical experience using various CSS selectors and properties to style web page elements.

Learn how to apply styles using element, class, and ID selectors, as well as combinator and group selectors.

Explore pseudo-classes and pseudo-elements to enhance user interactions and element styling.

Task Details¶

Set Up the HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Selectors Task</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header id="main-header">
        <h1 class="title">Welcome to My Webpage</h1>
        <nav>
            <ul class="nav-list">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="intro">
            <h2>Introduction</h2>
            <p>This is a brief introduction to my webpage. Here you can find various information about different topics.</p>
        </section>
        <section class="content">
            <h2>Content Section</h2>
            <p>This is the main content of the page. Feel free to explore and learn more about what we offer.</p>
        </section>
        <section class="footer">
            <h2>Footer Section</h2>
            <p>&copy; 2024 My Webpage. All rights reserved.</p>
        </section>
    </main>
</body>
</html>

Use basic selector to render page like following

Hint
- color: darkblue

Use Combinator and Group Selectors to achieve following layout

Use Combinator and Group Selectors:¶

Apply styles using combinator selectors (descendant, child, sibling) and group selectors.

Sample Script:¶

/* Element selectors */
body {
    font-family:'Times New Roman', Times, serif;
    margin: 0;
    padding: 10px;
}

h1, h2 {
    color: darkblue;
}

p {
    font-size: 1.1rem;
    line-height: 1.5;
}


/* ID selector */
#main-header{
    background-color: lightgray;
}


/* ID selector */
#main-header {
    background-color: lightgray;
    padding: 1.2rem;
    text-align: center;
}

/* Class selector */
.nav-list {
    list-style-type: none;
    padding: 0;
}

.nav-list li {
    display: inline;
    margin-right: 1.2rem;
}

.nav-list li a {
    text-decoration: none;
    color: darkblue;
    font-size: 1.1rem;
}

/* Descendant selector */
header nav ul li a:hover {
    color: orange;
    font-size: 1.3rem;
    padding: 10px;
}

/* Child selector */
main > section {
    margin: 20px;
    padding: 10px;
    border: 1px solid #ddd;
}

/* Adjacent sibling selector */
.intro + .content {
    background-color: #c0c0c0;
}

/* Group selector */
h2, p {
    margin: 10px 0;
}

/* Pseudo-classes */
a:hover {
    color: green;
}

a:active {
    color: darkred;
}

/* Pseudo-elements */
.intro::before {
    content: "★";
    color: gold;
    margin-right: 5px;
}

.content::after {
    content: "✿";
    color: pink;
    margin-left: 5px;
}