Introduction to CSS Selectors

• CSS (Cascading Style Sheets) is used to style and layout web pages. CSS selectors are patterns used to select the elements you want to style. Understanding CSS selectors is essential for controlling the look and feel of web pages.

Basic Selectors

1. Universal Selector (*)

• Description: Select all elements on the page. 🌍

• Example:

* {
    margin: 0;
    padding: 0;
  }

• Explanation: This resets the margin and padding for all elements.

2. Type Selector (Element Selector)

• Description: Selects all elements of a specific type.📄

• Example:

p {
  font-size: 16px;
}

• Explanation: All <p> elements will have a font size of 16px.

3. Class Selector (.)

• Description: Selects all elements with a specific class attribute. 🌟

• Example:

.highlight {
  background-color: yellow;
}

4. ID Selector (#)

• Description: Selects a single element with a specific id attribute.🆔

• Example:

#header {
  text-align: center;
}

Grouping and Combinator Selectors

1. Grouping Selector

• Description: Applies the same styles to multiple elements. 🎯

• Example:

h1, h2, h3 {
    color: blue;
  }

• Explanation: All <h1>, <h2>, and <h3> elements will have blue text.

2. Descendant Selector

• Description: Selects all elements that are descendants of a specified element. 🌿

• Example:

div p {
  color: green;
}

• Explanation: All <p> elements inside a <div> will have green text. 

3. Child Selector (>)

• Description: Selects all elements that are direct children of a specified element.⬅️

• Example:

ul > li {
  list-style-type: square;
}

4. Adjacent Sibling Selector (+)

• Description: Selects an element that is directly preceded by a specified element.🔗

• Example:

h2 + p {
  margin-top: 0;
}

• Explanation: The first <p> element immediately following an <h2> will have no top margin.

5. General Sibling Selector (~)

• Description: Selects all elements that are preceded by a specified element.🌈

• Example:

h2 ~ p {
  color: gray;
}

• Explanation: All <p> elements that are siblings of an <h2> will have gray text.

6. [attribute] Selector

• Description: Selects elements with a specified attribute.🏷️

• Example:

[type="text"] {
  width: 100%;
}

• Explanation: All <input> elements with type "text" will have a width of 100%

7. attribute^="value"] Selector

• Description: Selects elements whose attribute value starts with a specified value.✨

• Example:

[class^="btn-"] {
  padding: 10px;
}

Explanation: Any class that starts with "btn-" will have padding of 10px.

8. [attribute$="value"] Selector

• Description: Selects elements whose attribute value ends with a specified value.🔚

• Example:

[href$=".pdf"] {
  color: red;
}

Explanation: Any <a> tag linking to a .pdf file will have red text.

9. [attribute="value"] Selector*

• Description: Selects elements whose attribute value contains a specified value.💬

• Example:

[class*="icon"] {
  font-size: 20px;
}

Pseudo-Classes and Pseudo-Elements

1. Pseudo-Classes

• Description: Select elements based on their state. 🕵️‍♀️

• Examples:

a:hover {
  color: purple;
}
input:focus {
  border-color: blue;
}
li:nth-child(odd) {
  background-color: lightgray;
}

Explanation:

• :hover changes the color of a link when the mouse is over it.

• :focus changes the border color of an input field when it is focused.

• :nth-child(odd) changes the background color of odd list items.

2. Pseudo-Elements

• Description: Select a part of an element.✍️

• Examples:

p::first-line {
  font-weight: bold;
}
p::before {
  content: "Note: ";
  font-style: italic;
  color: red;
}

Explanation:

• ::first-line makes the first line of a paragraph bold.

• ::before adds content before the paragraph, styling it in red italics.

3. Complex Selectors

() Selector

• Description: Selects elements that do not match a certain selector.🚫

• Example:

:not(.highlight) {
  background-color: lightblue;
}

• Explanation:

•  All elements that do not have the "highlight" class will have a light blue background.

Combining Pseudo-Classes and Pseudo-Elements

• Example:

li:nth-child(2)::after {
  content: " (second item)";
  color: gray;
}

Explanation: This adds "(second item)" after the second list item.

Specificity and Importance

Specificity: 

• Determines which CSS rule is applied by the browser when multiple rules match the same element.🎯

• Example:

/* Type Selector */
p {
  color: black;
}
/* Class Selector */
.important {
  color: red;
}
/* ID Selector */
#unique {
  color: blue;
}

Explanation: An element with id="unique" will be blue, overriding the class and type selectors.

• !important Rule: Forces a style to be applied, overriding all other rules.🚨

• Example:

p {
  color: black !important;
}

Explanation: All <p> elements will be black, even if other rules apply.