Css Module 11

  Module 11 : Advanced CSS Selectors – Attribute Selectors, Pseudo-Classes, and Pseudo-Elements

Introduction

CSS (Cascading Style Sheets) provides various advanced selectors to enhance styling control over elements in a webpage. Among these, attribute selectors, pseudo-classes, and pseudo-elements are powerful tools that allow developers to apply styles dynamically without modifying HTML structure.

This module explores these advanced selectors in detail, providing practical examples, exercises, and methods to help learners understand and apply them effectively in real-world projects.

1. Attribute Selectors

       

      

Attribute selectors allow you to style elements based on their attributes and values. These selectors provide greater control over element styling without relying on additional classes or IDs.

1.1. Types of Attribute Selectors

Selector

Description

Example

[attribute]

Selects elements that have the specified attribute.

input[required] { border: 2px solid red; }

[attribute="value"]

Selects elements where the attribute matches exactly the given value.

input[type="text"] { background-color: lightgrey; }

[attribute~="value"]

Selects elements where the attribute contains the value as a separate word.

p[class~="highlight"] { color: blue; }

[attribute^="value"]

Selects elements where the attribute starts with the given value.

a[href^="https"] { color: green; }

[attribute$="value"]

Selects elements where the attribute ends with the given value.

img[src$=".png"] { border-radius: 10px; }

[attribute*="value"]

Selects elements where the attribute contains the value anywhere.

div[class*="box"] { padding: 10px; }

1.2. Practical Examples

Example 1: Styling Required Input Fields

css code

input[required] { border: 2px solid red; background-color: #ffe5e5; }

Example 2: Styling External Links

css code

a[href^="https"] { color: green; font-weight: bold; }

Example 3: Styling Images Based on File Type

css code

img[src$=".png"] { border-radius: 10px; box-shadow: 2px 2px 5px grey; }

2. Pseudo-Classes

Pseudo-classes define a special state of an element, such as when a user hovers over a button or when a form field is in focus.

 

        

2.1. Commonly Used Pseudo-Classes

Pseudo-Class

Description

Example

:hover

Styles an element when the user hovers over it.

button:hover { background-color: blue; }

:focus

Styles an element when it gains focus.

input:focus { border: 2px solid green; }

:nth-child(n)

Selects the nth child of a parent.

li:nth-child(odd) { background-color: lightgrey; }

:first-child

Selects the first child of a parent.

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

:last-child

Selects the last child of a parent.

p:last-child { color: red; }

:checked

Styles checked checkboxes or radio buttons.

input:checked { accent-color: green; }

:disabled

Styles disabled input fields.

input:disabled { background-color: grey; }

2.2. Practical Examples

Example 1: Hover Effect on a Button

css code

button:hover { background-color: blue; color: white; }

Example 2: Alternating Row Colors in a Table

css code

tr:nth-child(even) { background-color: #f2f2f2; }

Example 3: Highlighting Required and Checked Inputs

css code

input:required { border: 2px solid red; } input:checked { outline: 2px solid green; }

3. Pseudo-Elements

Pseudo-elements allow you to style specific parts of an element, such as the first letter of a paragraph or inserting content before/after elements.

3.1. Commonly Used Pseudo-Elements

Pseudo-Element

Description

Example

::before

Inserts content before an element.

p::before { content: "Note: "; font-weight: bold; }

::after

Inserts content after an element.

p::after { content: " (Read more)"; color: blue; }

::first-letter

Styles the first letter of an element.

p::first-letter { font-size: 2em; }

::first-line

Styles the first line of an element.

p::first-line { color: darkblue; }

::selection

Styles selected text.

::selection { background-color: yellow; }

3.2. Practical Examples

Example 1: Styling the First Letter of a Paragraph

css code

p::first-letter { font-size: 2em; color: darkred; }

Example 2: Adding Decorative Text Before and After Elements

css code

p::before { content: "★ "; color: gold; } p::after { content: " ✿"; color: pink; }

Example 3: Highlighting Selected Text

css code

::selection { background-color: yellow; color: black; }

4. Exercises

Exercise 1: Form Styling with Attribute Selectors

Style all required fields with a red border.

Change the background of text inputs that contain “email” in their name attribute.

Exercise 2: Styling Lists with Pseudo-Classes

     

    

Make every odd list item have a grey background.

Change the color of the first and last list items.

Exercise 3: Applying Pseudo-Elements

Add an arrow (→) before every link.

Highlight the first letter of every paragraph in blue.

5. Summary

Selector Type

Purpose

Example Usage

Attribute Selectors

Select elements based on attributes

[type="text"] { color: red; }

Pseudo-Classes

Apply styles based on element states

button:hover { background: blue; }

Pseudo-Elements

Style specific parts of elements

p::first-letter { font-size: 2em; }

Form Validation Styling: input:required for required fields.

Navigation Styling: a[href^="https"] for external links.

Content Formatting: p::first-line to emphasize the first line of a paragraph.

7. Conclusion

Understanding attribute selectors, pseudo-classes, and pseudo-elements provides a deeper control over styling and enhances user experience without modifying the HTML structure. Mastering these techniques will significantly improve your CSS skills, making your designs more dynamic and interactive.

Would you like additional code samples, exercises, or project ideas to integrate into your lecture materials.