Hey guys! So this is my first article ever. I hope I can solve your doubts and issues which you have with the underlying topics that I would cover in a much easier and concise manner, because lets admit it --- nobody likes to read long boring blogs :P

We live in a fast-paced world with new emerging technologies and articles related to tech should be crisp and easy to brush whenever we get stuck in development or preparing for a tech interview.

So without much further ado, lets start off quickly !!!

Happy learning :) :) :)

BASIC SELECTORS

Universal Selector

• Used to apply CSS styling to all elements in the DOM.
• Mainly used for changing default behaviour of browser.

Example:

/* Asterisk symbol means apply to all */
*{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

Type Selector

• Used to apply CSS styling by particular node names.
• Not advisable to use as this styles all elements of a particular node type.

Example:

/* Document header */
header{
    display: flex;
    color: #FF3614;
}

Class Selector

• Used to apply CSS styling by class names.
• Most commonly used.

Example:

/* Set of icons having common class */
.icons-social{          
    height: 50px;
    margin: 10px 10px 0 0;
}

ID Selector

• Used to apply CSS styling by ID name.
• ID should always be unique so this styling applies to unique elements.

Example:

/* Display picture having ID as dp-image */
#dp-image{
    height: 500px;
}

Attribute Selector

• Used to apply CSS styling based on the presence or value of a given attribute.

Example:

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

GROUPING SELECTORS

Selector list

• Used to apply CSS styling based comma (,) which selects all the matching nodes.

Example:

/* Selects all matching elements */
span,
div {
  border: red 2px solid;
}

COMBINATORS

Descendant combinator

• Used to apply CSS styling based on descendant hierarchy or nested hierarchy.
• Hierarchy can be direct or indirect.

Example:

/* Styling for a <p> which is in a <div> which is in a class ".inner" in a hierarchical fashion */
.inner div p{
    margin-top: 0;
    font-size: 30px;
    font-weight: bold;
}

Child combinator

• Used to apply CSS styling based on descendant hierarchy or nested hierarchy.
• Hierarchy must be direct.

Example:

/* List items that are children of the "my-things" list */
ul.my-things > li {
  margin: 2em;
}

General sibling combinator

• Used to apply CSS styling based on brother-sister / sibling same level nodes.
• Must not be directly adjacent to one another but must fall in a brother-sister iteration.

Example:

/* Paragraphs that are siblings of and
   subsequent to any image */
img ~ p {
  color: red;
}

Adjacent sibling combinator

• Used to apply CSS styling based on brother-sister / sibling same level nodes.
• Must be directly adjacent to one another and must fall in a brother-sister iteration.

Example:

/* Paragraphs that come immediately after any image */
img + p {
  font-weight: bold;
}

PSEUDO SELECTORS

Pseudo-classes

• Used to apply CSS styling to an element at a particular state.
• Mainly used for changing hovering buttons and adding special effects.

Example:

/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}

Pseudo-elements

• Used to apply CSS styling to a specific part of the selected element.
• New feature of HTML5 but rarely used.

Example:

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

Pseudo - ::before and ::after elements

• Used to insert “content” before and after any non-replaced element (e.g. they work on a div but not an input). This effectively allows you to show something on a web page that might not be present in the HTML content.
• Mainly used to apply trick effects and special effects with background images.

Example:

/* Used to create a blurry background image by tweaking opacity. Image shows up a bit blurred behind element with class .container */
.container::before {
            content: '';
            background: url('bg.png') 
                no-repeat center center/cover;
            position: absolute;
            opacity: 0.3;
            top: 0px;
            left: 0px;
            width: 100vw;
            height: 100vh;
            z-index: -1;
        }

Example:

/* Similar effect but image shows after the element with class .banner */
.banner::after {
    content: ""; // ::before and ::after both require content
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, #eaee44, #33d0ff);
    opacity: .7;
}