Selectors in CSS:

CSS selectors are patterns used to select and style HTML elements. They allow you to target specific elements or groups of elements within a web page, enabling you to apply styles based on various criteria.

Basic Selectors:

1. Type Selector:
   • Selects all elements of a specific type.

p {
    /* Styles for all <p> elements */
    color: blue;
}

2. Class Selector:
   • Selects elements with a specific class attribute.

.my-class {
    /* Styles for elements with class="my-class" */
    font-weight: bold;
}

3. ID Selector:
   • Selects a single element with a specific ID attribute.

#my-id {
    /* Styles for element with id="my-id" */
    background-color: yellow;
}

Attribute Selectors:

4. Attribute Presence Selector:
   • Selects elements with a specific attribute.

[type] {
    /* Styles for elements with a "type" attribute */
    border: 1px solid black;
}

5. Attribute Value Selector:
   • Selects elements with a specific attribute value.

[type="text"] {
    /* Styles for elements with type="text" */
    background-color: lightgray;
}

Combined Selectors:

6. Descendant Selector:
   • Selects elements that are descendants of a specified element.

div p {
    /* Styles for <p> elements inside <div> elements */
    margin-top: 10px;
}

7. Child Selector:
   • Selects elements that are direct children of a specified element.

ul > li {
    /* Styles for <li> elements that are direct children of <ul> */
    list-style-type: none;
}

8. Adjacent Sibling Selector:
   • Selects an element that is immediately preceded by a specified element.

h2 + p {
    /* Styles for <p> elements immediately preceded by <h2> */
    font-style: italic;
}

Pseudo-classes and Pseudo-elements:

9. Pseudo-classes:
   • Select elements based on their state or position.

a:hover {
    /* Styles for <a> elements on hover */
    color: red;
}

10. Pseudo-elements:
    • Select and style a specific part of an element.

p::first-line {
    /* Styles for the first line of <p> elements */
    font-weight: bold;
}

Combinators:

11. Descendant Combinator (Space):
    • Selects all elements that are descendants of a specified element.

div p {
    /* Styles for <p> elements inside <div> elements */
    margin-top: 10px;
}

12. Child Combinator (>):
    • Selects all elements that are direct children of a specified element.

ul > li {
    /* Styles for <li> elements that are direct children of <ul> */
    list-style-type: none;
}

13. Adjacent Sibling Combinator (+):
    • Selects an element that is immediately preceded by a specified element.

h2 + p {
    /* Styles for <p> elements immediately preceded by <h2> */
    font-style: italic;
}

14. General Sibling Combinator (~):
    • Selects elements that are siblings of a specified element.

h2 ~ p {
    /* Styles for <p> elements that are siblings of <h2> */
    font-weight: normal;
}

Understanding and practicing with these CSS selectors and their usage will enhance your ability to style web pages effectively.