CSS Selectors and Pseudo-element.

What is CSS?

CSS stands for Cascading Style Sheet language which describes how a document is written in a markup language like(HTML) should be displayed and presented. CSS determines how the HTML is displayed on the screen it beautifies the HTML pages to look good. Using CSS we can add color, background, font, width, height, layouts and many more can be done using CSS on HTML document.

Why CSS is important?

• Separation of concern: Keeps your website's content(HTML) separated from it style(CSS). It keeps the code cleaner, more readable and easier to maintain and update.

• Reusability: We can use CSS Rule in multiple HTML. Once we write we can use it anywhere no need to write again and again. It saves time and makes website styling consistent.

• Flexibility: It gives you a ton of control over the visual presentation of your website.

• User Experience: CSS create a Visually appealing, user-friendly website that can adapted by any browser.

How does CSS work?

There are lots of concepts about how CSS works but we will go through only what is important.

1. Selectors: Selectors target the HTML element that we want to style. There are many types of selectors.

• Basic Selector 1)Universal Selector: It selects all elements of the HTML to apply all CSS over all tags. * is used to select all elements. uses: Removing default browser margins and padding to create a consistent baseline:

   *{
    padding:0
   }

2)Individual Selector: when we want to target specific

elements from that HTML document then we use an individual
selector i.e. [tag name]{}.
This is a more specific selector than a universal selector.It
means we put any CSS property inside an individual selector
that overrides the default.

• Class and ID selector

Class Selector: This selector is used to target specific class attributes. Classes can be reused all over the document.
ex .important-text{properties:values}
ID Selector: This selector is used to target unique element with specific ID attributes. ex #header{properties:values}

• AND(chaining) & Combined Selector

AND Selector: Combining multiple selectors to target elements with high specificity. To use this, chain multiple selectors together with a dot(.) in between.
div.container p {
color: red;
}

Combined Selector: Applying the same styles to several different
targets simultaneously.

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

-Descendant Selector
Selects elements that are descendants of a specified parent element. It uses a space () between selectors to signify this relationship. Syntax: ancestor descendant { /* Styles applied here */ }

ul li {
     list-style-type: circle;
}

IMPORTANT POINT OF DESCENDANT SELECTOR

Nesting: You can chain multiple descendant selectors for more specific targeting. Example: div section article p { ... }
Specificity: Less specific than child selectors (which use >) because they select elements at any nesting depth, not just direct children.
Flexibility: It's one of the most versatile CSS selectors since it can target elements many levels down the hierarchy.

-Child Selector (>): Targets Elements that are direct children of another element.

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

• Adjacent Sibling Selector (+): Targets an element immediately following a sibling element.

                p + p { 
                 margin-top: 2em;
                 }

• General Sibling Selector (~): Targets elements that follow a sibling, with possible elements in between. This means targets all siblings of an element.

• Pseudo Selector

  1) Pseudo class Selector: Target an element based on its
  state, position, or user interaction.

  Syntax :selector:pseudo-class { /* Styles applied here */ }
  Example

  Dynamic States:

  :hover (mouse hovering)
  :focus(element has keyboard focus)
  :active (element is being clicked)
  :visited(for styling visited links)

Structural Relationships

:first-child (targets the first child of its parent)
:last-child (targets the last child of its parent)

:nth-child() (targets elements based on their position
using a formula)

 /* Links get an underline on hover*/
         a:hover { 
          text-decoration: underline;
       }

2) Pseudo-elements: Style specific parts of an element or insert content that's not present in the HTML.

Common Examples:

::before, ::after (insert content before or after the
element's content)
::first-letter (style the first letter of a block element)
::first-lin (style the first line of a block element)
::selection (style text that has been highlighted by the user). This is a CSS pseudo-element. It targets the portion of an element that is currently selected by the user (highlighted with their mouse or keyboard).

  li::before {
                      content: "✔ ";  /* Insert a checkmark */
                      color: green;
                      margin-right: 5px;
                 }


             /* selection example */

      <p>This text has normal selection.</p>
      <p class="important">This selection is more noticeable!</p>

          ::selection {
           background-color: light-blue; 
           color: white;
     }

          .important ::selection {
          background-color: orangered;
          color: black;
         }

If you found this blog post helpful, please share it with others who might be learning CSS!
_