CSS Selectors

Here are the basic CSS selectors:

Universal Selector: *
Element Selector: elementName
Class Selector: .className
ID Selector: #idName
Attribute Selector: [attributeName="value"]
Descendant Selector: ancestor descendant
Child Selector: parent > child
Adjacent Sibling Selector: element1 + element2
General Sibling Selector: element1 ~ element2
Pseudo-classes: :pseudo-class
Pseudo-elements: ::pseudo-element

These are the essential CSS selectors that you'll frequently use to target and style elements on your web pages. Each selector has its own specific syntax and purpose. Mastering these selectors will give you a strong foundation in CSS styling.

Universal Selector: Selects all elements. ----> * {
/* Styles applied to all elements */ }
Element Selector: Selects elements based on their tag name. --------> p {
/* Styles applied to all <p> elements */ }
Class Selector: Selects elements based on their class attribute. --------> .classname {
/* Styles applied to all elements with class="classname" */ }
ID Selector: Selects a single element based on its ID attribute. --------> #idname {
/* Styles applied to the element with id="idname" */ }
Attribute Selector: Selects elements based on the presence or value of their attributes. --------> [attribute="value"] {
/* Styles applied to elements with the specified attribute value */ }
Descendant Selector: Selects elements that are descendants of another element. --------> parent descendant {
/* Styles applied to descendant elements */ }
Child Selector: Selects elements that are direct children of another element. ------------------------->parent > child {
/* Styles applied to direct child elements */ }
Adjacent Sibling Selector: Selects an element that is immediately preceded by a sibling element. ----------> sibling1 + sibling2 {
/* Styles applied to sibling2 immediately preceded by sibling1 */ }
General Sibling Selector: Selects elements that are siblings of another element. -----> sibling1 ~ sibling2 {
/* Styles applied to sibling2 that follows sibling1 */ }
Pseudo-classes: Select elements based on their state or position. -----------> selector:pseudo-class {
/* Styles applied to elements with the specified pseudo-class */ }
Common pseudo-classes include :hover, :active, :focus, :first-child, :last-child, :nth-child(), and more.
Pseudo-elements: Select portions of an element based on specific criteria. ------------> selector::pseudo-element {
/* Styles applied to a specific part of an element */ }
Common pseudo-elements include ::before, ::after, ::first-line, and ::first-letter.

These selectors provide you with a powerful toolkit for targeting and styling elements within your HTML documents. Experimenting with different selectors and understanding their specificity will help you become more proficient in CSS styling.

Here's an example demonstrating various CSS selectors:

HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Selector Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1 class="title">Welcome to CSS Selector Example</h1> <p class="intro">This is a demonstration of various CSS selectors.</p> <ul class="list"> <li>Item 1</li> <li class="special">Item 2</li> <li>Item 3</li> </ul> </div> </body> </html>

CSS (styles.css):

/* Selecting elements by tag name */ h1 { color: blue; } /* Selecting elements by class */ .intro { font-style: italic; } /* Selecting elements by ID */ #special-heading { text-decoration: underline; } /* Selecting elements by attribute */ [class="special"] { color: red; } /* Selecting elements by descendant */ .container li { font-weight: bold; } /* Selecting elements by child */ .list > .special { background-color: yellow; } /* Selecting elements by pseudo-class */ li:nth-child(2) { font-size: 18px; }

In this example:

We have various HTML elements such as <h1>, <p>, <ul>, and <li> with different classes and IDs.
In the CSS, we're applying styles using different types of selectors:
- Tag selectors (h1)
- Class selectors (.intro)
- ID selectors (#special-heading)
- Attribute selectors ([class="special"])
- Descendant selectors (.container li)
- Child selectors (.list > .special)
- Pseudo-class selectors (li:nth-child(2))

Here's what each selector does:

h1: Selects all <h1> elements and changes their color to blue.
.intro: Selects elements with the class intro and applies italic font style.
#special-heading: Selects the element with the ID special-heading and adds underline text decoration.
[class="special"]: Selects elements with the class special and changes their color to red.
.container li: Selects <li> elements inside elements with the class container and makes their text bold.
.list > .special: Selects <li> elements with the class special that are direct children of elements with the class list and sets their background color to yellow.
li:nth-child(2): Selects the second <li> element and increases its font size to 18 pixels.