DEV Community: Anshul Raheja

All about selectors in CSS

Anshul Raheja — Tue, 14 Sep 2021 17:00:53 +0000

What are selectors?

CSS, or Cascading Style Sheets, is a design language that simplifies the process of making web pages presentable. Selectors are used to choose elements and apply styles to them.

Types of selectors

There are different categories of selectors. Each category has various types. I'll be talking about 3 categories - Basic, Combination, Attribute

1.BASIC SELECTORS

There are majorly 4 Basic Selector which are mentioned below:-

 <!-- refer this html to understand basic selector -->
    <div class="container">
        <h1>CSS Selectors</h1>
        <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, maiores.</h2>
        <p id="mainPara">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, corporis.</p>
    </div>

-Universal selector

It applies rules to all the elements in HTML except the pseudo-element - ::before and ::after.
(*) is used as a universal selector

* {
  font-family: "Poppins", sans-serif;
  /* font is applied to all elements */
}

-Element selector

It selects all the elements of that type

h1 {
  font-size: 3rem;
  text-align: center;
  /* this style applies to all h1 elements */
}

-Class selector

This rule is only applied to elements with the corresponding class attribute, dot (.) is prefixed to the class name in CSS.

.container {
  background-color: rgb(255, 235, 201);
  padding: 1rem;
  margin: 1rem;
  /* this style is applied to element with class container */
}

-ID selector

ID selectors are a more restrictive version of class selectors. They work in a similar fashion, except that each page can only have one element with the same ID, which means you can't reuse styles.(#) is prefixed to ID value in a CSS ID selector.

#main {
  color: rgb(117, 52, 34);
  /* this style is applied to element with ID main */
}

Output after all the above CSS

2.COMBINATIONS SELECTORS

<!-- html to understand combination of selector -->
<div class="list-container">
  <span>This is the span element</span>

  <ul>
    <li>Child 1 of ul element</li>
    <li>Child 2 of ul element</li>
  </ul>

  <ol>
    <li>Direct Child of ol element</li>
    <span>
      <li>Indirect Child of ol Element</li>
    </span>
  </ol>

  <div>This is a div </div>
  <a href="/">Link 1</a>
  <span>
    <a href="/">Link 2</a>
  </span>
  <a href="/">Link 3</a>

  <section>This is the section element</section>
    <a href="/">Link 1</a>
    <a href="/">Link 2</a>
    <a href="/">Link 3</a>

</div>

-AND selector

Selects element that match the specified combination

div.list-container {
  background-color: rgb(255, 235, 201);
  /* apply style to div with class list-container */
}

-OR selector

Either of the element/class, separated with comma(,)

 span, h2 {
  background-color: rgb(117, 52, 34);
  /* apply style to all span and h2 elements */
}

-Descendant selector

Selects all the child of the element
syntax: parentElement (space) childElement {}

ul li {
  background-color: orange;
  /* select all childs of ul */
}

-Direct Child selector

Selects only the direct child of the specified element
syntax: parentElement > childElement {}

ol > li {
  background-color: yellow;
  /* select the direct child of ol */
}

-All Siblings selector

Selects all the siblings (element at same level) after the first element is encountered.
syntax: firstElement ~ ssecondElement{}

div ~ a {
  color: rgb(255, 0, 0);
  /* selects only link1, link3  */
}

-Next Sibling selector

Only selects the very next/adjacent sibling to the first element
syntax: firstElement + ssecondElement{}

section + a {
  color: black;
  /* selects only link1 under section elementalign-content*/
}

Output after all the above CSS

3.ATTRIBUTE SELECTORS

<!-- html to understand attribute selector -->
<div class="list-container">
  <span type="text">This is the span element</span>

  <ul>
    <li flag="true">Child 1 of ul element</li>
    <li flag="T">Child 2 of ul element</li>
  </ul>

  <ol>
    <li data="happy">Direct Child of ol element</li>
    <span>
      <li data="hello">Indirect Child of ol Element</li>
    </span>
  </ol>

  <div data="world">This is a div </div>
  <a href="/" link="direct">Link 1</a>
  <a href="/" link="indirect">Link 2</a>
  <a href="/">Link 3</a>

-Has attribute

Selects element with the specified attribute
syntax: [attribute]{}

[type]{
  background-color: red;
}

-Exact attribute

Selects element which has the exact same attribute and value.
syntax: [attribute = "value"]{}

[flag="T"]{
  background-color:yellow;
}

-Begin attribute

Selects element whose attribute's value begins with specified text
syntax: [attribute^ = "value"]{}

[data^="h"]{
  background-color:pink;
}

-End attribute

Selects element whose attribute's value ends with specified text
syntax: [attribute$ = "value"]{}

[data$='d']{
  background-color: grey;
}

-Substring attribute

Selects element who specified text anywhere in the attribute value
syntax: [attribute* = "value"]{}

[link*="dir"]{
  background-color: blue;
  color:white;
}

Output after all the above CSS

BONUS

Some random examples to have more clarity

.container * {
/* selects everything inside container class*/
}

.c1 .c2 + .c3 {
  /* Lets break it into  2 steps 
  1. .c1 .c2 - selects all c2 class elements in c1 class element 
  2. point 1 + .c3 - selects all c3 class elements that are next sibling  of (.c1 .c2)
  */
}

React Lifecycle Methods in Functional Terms

Anshul Raheja — Mon, 13 Sep 2021 23:00:00 +0000

Before we get into lifecycle methods with react hooks, let's have a look at what they are and how they work. We'll start with a quick overview of:

What is the component lifecycle?
What are lifecycle methods?

What is the component lifecycle?

Just like the human lifecycle, react components go through a lifecycle of events:

Mounting: The component is created and inserted into the Document Object Model (DOM).
Updating: When the component is re-rendered as a result of changes made in either state or props
Unmounting: The component is removed from DOM
Error handling: If an error occurs during the rendering process, it must be handled.

What are lifecycle methods?

(class-based component)

The methods are called at various points throughout a component's lifecycle. All four phases of a component's lifecycle — mounting, updating, unmounting, and error handling — are covered by lifecycle methods.

1.componentDidMount: After the initial render, the component is mounted to the DOM and the componentDidMount method is invoked.

class DemoComponent extends React.Component {
  componentDidMount() {
    console.log("The DemoComponent is added into the DOM");
  }

2.componentDidUpdate: The componentDidUpdate lifecycle method is invoked after the changes in props or state are made

class DemoComponent extends React.Component {
  componentDidUpdate() {
    console.log("The DemoComponent is updated and rendered");
  }

3.componentWillUnmount: When a component is unmounted and destroyed, the componentWillUnmount lifecycle function is called. This is an excellent location for any necessary cleaning.

class DemoComponent extends React.Component {
  componentWillUnmount() {
    console.log("The DemoComponent has been removed from DOM");
  }

Pictorial Representation of class based lifecycle method

React lifecycle methods using React Hook - useEffect()

Key point of useEffect hook

It instructs React to carry out a job once the component has rendered.
useEffect is asynchronous, so it does not block the browser.
The useEffect hook allows components to have access to the lifecycle events of a component.
React first updates the DOM, then calls any function passed to useEffect()

Example: fetch request, DOM manipulation using setTimeOut()

syntax:

useEffect(callbackFunction, OptionalDependencies) 

// another way 

useEffect(() => {
    //callback function
},[dependency array])

Lifecycle handling with useEffect

(functional components)

The handling of lifecycle methods has been incredibly simple and easy since the introduction of react hooks. All of the methods stated above can be handled with the useEffect hook.

1.componentDidMount: 'useEffect with empty dependency array' replaces this method. If no value is provided in the array, it will only evaluate the hook on mount(first render).

const DemoComponent = () => {
  useEffect(() => {
    console.log("The DemoComponent is added into the DOM");
    //This will only run once on initial render as there is empty dependency array
  },[]);

2.componentDidUpdate: This method is replaced by useEffect with no dependency array or values in dependency array. If the array itself is not provided, the hook will be evaluated on every re-render. If any value is provided in the dependency array then the hook will be evaluated in the change of that variable

const Component = () => {
  useEffect(() => {
    console.log("The DemoComponent is updated");
    //called on every re-render
  });

useEffect(() => {
    console.log("The counter variable is updated");
    //called when counter value changes
  },[counter]);

3.componentWillUnmount: UseEffect with a return statement has replaced this technique. If useEffect returns a function, that function is only called after the component is removed from the DOM.

useEffect(() => {
    return () => {
            console.log("The Demo component is removed from DOM");
            //called when component is removed 
        }
  }, []);

DEV Community: Anshul Raheja

All about selectors in CSS

What are selectors?

Types of selectors

1.BASIC SELECTORS

-Universal selector

-Element selector

-Class selector

-ID selector

Output after all the above CSS

2.COMBINATIONS SELECTORS

-AND selector

-OR selector

-Descendant selector

-Direct Child selector

-All Siblings selector

-Next Sibling selector

Output after all the above CSS

3.ATTRIBUTE SELECTORS

-Has attribute

-Exact attribute

-Begin attribute

-End attribute

-Substring attribute

Output after all the above CSS

BONUS

Some random examples to have more clarity

React Lifecycle Methods in Functional Terms

What is the component lifecycle?

What are lifecycle methods?

(class-based component)

Pictorial Representation of class based lifecycle method

React lifecycle methods using React Hook - useEffect()

Key point of useEffect hook

Lifecycle handling with useEffect

(functional components)

Pictorial Representation useEffect hook