CSS Selector

CSS (Cascading Style Sheets) selectors are patterns used to select the HTML elements you want to style. Here’s a quick guide to the different types of CSS selectors and some examples for each:

1. Basic Selectors

• Element Selector: Selects all elements of a given type.

  p {
    color: blue;
  }
  

  This will make the text color of all <p> elements blue.

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

  .my-class {
    font-size: 20px;
  }
  

  This will apply a font size of 20px to all elements with the class my-class.

• ID Selector: Selects an element with a specific ID attribute.

  #my-id {
    background-color: yellow;
  }
  

  This will set the background color to yellow for the element with the ID my-id.

2. Grouping Selectors

• Group Selector: Applies the same styles to multiple elements.

  h1, h2, h3 {
    font-family: Arial, sans-serif;
  }
  

  This will set the font family to Arial for all <h1>, <h2>, and <h3> elements.

3. Attribute Selectors

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

  input[type="text"] {
    border: 1px solid gray;
  }
  

  This will apply a gray border to all <input> elements with the type attribute set to "text".

4. Combinators

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

  .container p {
    color: red;
  }
  

  This will make the text color of all <p> elements that are descendants of an element with the class container red.

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

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

  This will change the list style to squares for <li> elements that are direct children of <ul>.

• Adjacent Sibling Selector: Selects elements that are immediately preceded by a specified element.

  h1 + p {
    margin-top: 0;
  }
  

  This will remove the top margin of a <p> element that directly follows an <h1>.

• General Sibling Selector: Selects all elements that are siblings of a specified element.

  h1 ~ p {
    color: green;
  }
  

  This will set the text color of all <p> elements that are siblings of an <h1> to green.

5. Pseudo-Classes

• :hover: Selects elements when the mouse is over them.

  a:hover {
    text-decoration: underline;
  }
  

  This will underline the text of <a> elements when the user hovers over them.

• :nth-child(n): Selects elements based on their position in a parent.

  li:nth-child(2) {
    color: orange;
  }
  

  This will color the text of the second <li> element in each list orange.

6. Pseudo-Elements

• ::before: Inserts content before an element’s content.

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

  This will add "Note: " before the content of each <p> element.

• ::after: Inserts content after an element’s content.

  p::after {
    content: " - end of paragraph";
    color: gray;
  }
  

  This will add " - end of paragraph" after the content of each <p> element.

These are some of the foundational CSS selectors you can use to style your web pages. Let me know if you need more detailed examples or explanations!