2 – comments and selectors

    <!-- Type selector example -->
    <p>This is a paragraph.</p>

    <!-- Class selector example -->
    <button class="button">Click me!</button>

    <!-- ID selector example -->
    <h1 id="header">Header</h1>
    <h2>Header 2</h1>

    <!-- Attribute selector example -->
    <input type="text" placeholder="Enter your text here">

    <!-- Pseudo-element selector example -->
    <input type="text" placeholder="Enter some text">

    <!-- Child selector example -->
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <!-- Descendant selector example -->
    <div class="container">
      <p class="content">This is some content.</p>
    </div>

    <!-- Adjacent sibling selector example -->
    <h2 class="header">Header</h2>
    <footer class="footer">Footer</footer>

    <!-- Subsequent sibling selector example -->
    <h2 class="header">Header</h2>
    <div class="content"></div>

      <!-- Pseudo-class selector example -->
    <a href="#">Click me!</a>

      /* Element selector */
      p {
        font-size: 16px;
      }

      /* Class selector */
      .button {
        background-color: #FFC;
      }

      /* ID selector */
      #header {
        color: red;
      }

      /* Attribute selector */
      [type="text"] {
        border: none;
      }

      /* Pseudo-element selector */
      input::placeholder {
        color: gray;
      }

      /* Child selector */
      nav > ul {
        list-style-type: none;
      }

      /* Descendant selector */
      .container .content {
        background-color: #FFC;
      }

      /* Adjacent sibling selector */
      .header + .footer {
        text-align: center;
      }

      /* Subsequent sibling selector */
      .header ~ .footer {
        margin-top: 10px;
      }

       /* Pseudo-class selector */
      a:hover {
        text-decoration: underline;
      }

      h1, h2 {
       background-color: red;
      }

      /* Multiline
          comment
          */

element selector → targets all elements with a specific tag name.
p selector target all the p elements
class selector → targets all the elements with a specific class.
All CSS classes start with a dot .
.button targets the element with class=”button”
id selector → targets only one element with a specific id
id classes start with the a hash #

header targets the element with id=”header”

attribute selector → targets elements with specific attributes
It can include wildcards characters like , ^, $ and ~ [attribute^=value] → attribute value starts with specific value [attribute=value] → attribute value contains the specific value
[attribute$=value] → attribute value ends with the specific value
[attribute!=value] → attribute value is not equal to the specific value
selects the element with the attribute [type=”text”]

pseudo element selector → CSS provides a set of pseudo elements that allow you to style certain parts of an element
Here are some pseudo-element selector:
::before → inserts content before the content of the selected element
::after → inserts content after the content of the selected element
::first-line → selects the first line of a block-level element
::first-letter → selects the first letter of a block-level element
::placeholder → selects the placeholder of an input or textarea element
it selects the placeholder of the input element

child selector → targets only direct children of an element.

is used to separate the two selectors
nav > ul selects the ul child of the nav element
descendant selector → targets any descendant of a parent element
space is used to separate the two selectors
it selects the element with .content class with parent element with .container class
/* */ are used for comments in CSS
here is a multiline comment

adjacent sibling selector → targets the sibling element that directly follows another element

• is used to separate the two selectors
  it selects the element with class .footer that…
  is the direct sibling of the element with class .header
  general sibling selector → targets all the elements preceding a specific element
  ~ is used to separate the two selectors
  it selects the elements with class .footer that…
  are siblings of the element with class .header

pseudo-class selector → targets elements based on their state.
common pseudo classes are :hover, :active and :focus
it targets the a element on hover state.
group selector → targets multiple elements at a time.
, is used to separate the elements
it selects h1 and h2 and changes their background color