Forem: Vinod Godti

API calls using fetch in javascript

Vinod Godti — Mon, 23 Dec 2019 20:24:09 +0000

Nowadays almost all web applications are API based which means backend for the application will be written in API(Application programming interface). So that backend application can be used across all platforms such as browsers, mobile, and desktop.The API integration is the most important thing to learn in modern web application development.

Today we will learn how to make API calls by using fetch in javascript

Before going to details , Let's have some idea of the API. Basically API has four methods(commonly used) those are GET, POST, PUT and DELETE. With these four methods get, create, update or delete functionality can be implemented.

GET means to get some data from the server or any other source
POST means Posting some data to the server to create some record
PUT means posting some data to update the existing record
DELETE means send a delete request to the server to delete some data in server

let's jump into our main topic

fetch is basically a module that is a builtin feature of javascript used to call the API endpoints of the server and get the response.

Basic syntax

fetch('server url')
    .then(res => 
        console.log(res)
    );

GET Request Fetch

I found an online tool to make fake API calls and check how "fetch" works.
The tool is https://jsonplaceholder.typicode.com.Just we have to pass the URL in fetch API as shown in the below URL.

fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => console.log(json))//Make response into json format

Output
 {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
}

POST Request Fetch

We can make a POST request to the server using the fetch using the following syntax.

    fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
        title: 'foo',
        body: 'bar',
        userId: 1
    }),
    headers: {
        "Content-type": "application/json; charset=UTF-8"
    }
    })
    .then(response => response.json())
    .then(json => console.log(json))

Output/Response 

    {
        id: 101,
        title: 'foo',
        body: 'bar',
        userId: 1
    }

In the above request,we can send any data object in the stringified format in the body of the request. In the backend, this data can be accessed for processing or saving into the database. Here as we send the data in JSON format so we are making header content-type as application/json.There are other content-type such application/xml,text/html or multipart/form-data.

PUT Request Fetch

To update some data to server/resource, We can use this method.

    fetch('https://jsonplaceholder.typicode.com/posts/1', {
    method: 'PUT',
    body: JSON.stringify({
        id: 1,
        title: 'foo',
        body: 'bar',
        userId: 1
    }),
    headers: {
        "Content-type": "application/json; charset=UTF-8"
    }
    })
    .then(response => response.json())
    .then(json => console.log(json))

    Output 
    {
        id: 1,
        title: 'foo',
        body: 'bar',
        userId: 1
    }

DELETE Request Fetch

To delete some data in the server/resource, we can use this method.

    fetch('https://jsonplaceholder.typicode.com/posts/1', {
        method: 'DELETE'
    })

Important: the resource will not be really deleted on the server but it will be faked as if.

To understand the API calls, first, you have to understand,How API can be written in backend and how it executed. We will cover this topic in next blog.

CSS clip-path property and it's advantages

Vinod Godti — Thu, 31 Oct 2019 18:18:49 +0000

CSS clip-path property is very useful when designing the landing pages and the latest web page design.clip-path to show some portion of the image or shape instead of showing the entire shape or image.

let's dive into details

Basic Shapes

clip-path has basic-shape values such as circle, ellipse, polygon or inset to make some basic shapes circle, ellipse, polygon or rectangle respectively.
clip-path property works only when there should be basic shape or image. On top of the basic shape or image, we can clip some path out to create many new shapes.

.circle{
    width:100px;
    height:100px;
    background:#AD2F11;
    clip-path:circle(50%)
}

.ellipse{
    ....
clip-path:ellipse(25% 40% at 50% 50%) 
}
.triangle {
    ....
    clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
}

Advance shapes

Now let's take one more step ahead to make trapezoid shape using clip-path

.trapezoid{
    ...
    clip-path:polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

.pentagon{
    ...
    clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

For some old version browsers, we should use a vendor-specific prefix on clip-path such as -webkit-,-moz,-o- for Chrome, Mozilla and opera respectively.

Circle clip-path syntax can be defined also like this

clip-path: circle(radius at posX posY)

.circle-advanced{
    clip-path:circle(50% at 70% 20%)
}

Ellipse also be defined as

clip-path: ellipse(radiusX radiusY at posX posY)

.ellipse-advanced{

    clip-path:ellipse(50% 65% at 70% 50%);
}

Find the codepen below to play with the above examples

To explore more advanced CSS clip-path, visit the below URL.

clipy

Complex shapes and layout design in CSS

Vinod Godti — Fri, 25 Oct 2019 18:02:15 +0000

Some shapes or layout design in CSS is a little bit tricky to design in CSS code. using border-radius we can create many different shapes.CSS clip-path property will make complex shapes CSS design a lot easier to write code.

using the border-radius property

I will start with simple shapes and go to complex shapes

let's create the rounded corner rectangle

<!-- Rectangle with single border radius-->
<div class="rectangle">

</div>

.rectangle{
    background:#3380FF;
    width: 20rem;
    height: 20rem;
    border-radius:25px;
}

In the above CSS code border-radius property applied and rounded corner rectangle formed.

Let's change border-radius property value 2 different values

.rectangle{
    ....
    border-radius:25px 10px;
}

first value in the border-radius is for top left and bottom right corner.
second value is for top right and bottom left corner.Thus we can have different rounded corner.

border-radius property can also have 4 values.Each value for each corner.

.rectangle{
    ....
    border-radius:10px 20px 30px 40px;
}

first in the border-radius is for top left and 2nd is top right,3rd value is for bottom right and finally 4th one is bottom left value.

There is another way of providing the value of the border-radius property which is eight different value with "/" with 1 to 4 value on each side of the slash

let's look into the CSS code

    border-radius:[top-left horizontal radius] [top-right horizontal radius] [bottom-right horizontal radius] [bottom-left horizontal radius] / [top-left vertical radius] [top-right vertical radius] [bottom-right vertical radius] [bottom-left vertical radius]

As mentioned in the above code before the slash are for horizontal border-radius and after the slash are for vertical border-radius

.rectangle{
    border-radius:10px 20px 30px 40px/ 40px 30px 20px 10px;
}

All the values of the border-radius can be provided as percentage or em. If I write border-radius as 50% with square it will be converted to circle which is the beauty of the border-radius property.

Recently I found an amazing tool to create asymmetric shapes. So guy's here it is 9elements
In this tool, you can create n number of different shapes with a border-radius property only.
In the next blog, I will write about clip-path and other complex CSS shapes.

Capture Visitors in HTML/JS to your website

Vinod Godti — Fri, 27 Sep 2019 18:04:29 +0000

We can capture visitor's IP,geo-location and page URLs visited in a website. We can also capture from which device, platform and browser user as visited the webpage.

Why we should capture visitor's details

To know the from which location traffic comes into our website. From this visitor's history, we can also analyze the user's behaviour. As per the user's behaviour we can target our potential customer.

Let's capture the visitor's geo-location

To gather the geo-location(longitude and latitude) of the visitor,We have HTML Geolocation API.we can access geolocation by calling method getCurrentPosition of navigator.geolocation object.

first we have check that browser or device support navigator.geolocation object or not

if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
        console.log("longitude:"position.coords.longitude)
        console.log("latitude:"position.coords.latitude)
    })
}else{
    console.log("Geolocation is not supported by this device/browser")
}

NOTE: This API is strictly privacy-based means the browser will prompt for visitor's permission, when the user accepts to share location then only we can get the geolocation.

Page URLs and referrer URL

To know from which website/webpage visitors came to your webpage/website we will use document.referrer.

    console.log(document.referrer)

To get current page URL

    console.log(location.href)

Browser/Platform Details

We have navigator.userAgent to get the visitor's browser/platform details.

console.log(navigator.userAgent)

//Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/76.0.3809.100 Chrome/76.0.3809.100 Safari/537.36

IP Address and location

There are various web services to get IP address, city, region and country name. We may not get accurate details, But we can still rely on these services.

fetch("https://ipapi.co/json/")
.then(response=>response.json())
.then((responseJson=>{
    console.log(responseJson)
}))

{
"ip": "2409:4062:115:954b:211e:e74:5180:15ae",
"city": "Bhubaneswar",
"region": "Odisha",
"region_code": "OR",
"country": "IN",
"country_name": "India",
"continent_code": "AS",
"in_eu": false,
"postal": "751030",
"latitude": 20.2724,
"longitude": 85.8339,
"timezone": "Asia/Kolkata",
"utc_offset": "+0530",
"country_calling_code": "+91",
"currency": "INR",
"languages": "en-IN,hi,bn,te,mr,ta,ur,gu,kn,ml,or,pa,as,bh,sat,ks,ne,sd,kok,doi,mni,sit,sa,fr,lus,inc",
}

Limitations:
1,000 requests per day
Requires SSL (https)

Note:- We can use various analytics services to track visitors to our website. To track website traffic by your own way then you can use the above hack.

CSS Shapes with Animation

Vinod Godti — Sun, 15 Sep 2019 05:13:20 +0000

You can do wonders with simple CSS properties in the designing world.for example you can create a simple arrow symbol or heart with beating. So let's learn how to create different shapes in CSS and add animation property to shapes that are created.

Circle

To create a circle, we have to first create div element and assign width and height CSS property. Add some background color and make border-radius 50%.

.circle{
   width:100x;
   height:100px;
   background:#159AC1;
   border-radius:50%; 
}

Rectangle

To create a rectangle, We have to create a div element and assign width and height CSS property. Add some background color to make more clearly visible.

.rectangle{
   width:100x;
   height:50px;
   background:#159AC1;
}

Triangle

To create a triangle shape, we have to user border property as with position: absolute. See the CSS code below.

.triangle-up{
    position: absolute;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    border-bottom: 20px solid tomato;
}

.triangle-down{
    position: absolute;
    border-top:20px solid tomato;
    border-left:20px solid transparent;
    border-right:20px solid transparent;
}

.triangle-right{
    position:absolute;
    border-right:20px solid tomato;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
}

.triangle-left{
    position: absolute;
    border-left: 20px solid tomato;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

Quarter Moon

To create the quarter moon, First, create circle white background and apply box-shadow

.quarter-moon {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 10px 10px 0 0 pink;
}

Heart

To create a heart shape, We should use pseudo-class before and after. We used scale rotate & scale transform properties in animation keyframe to show heartbeat

.heart{
        position: relative;
    }

.heart:before {
    content: "";
    position: absolute;
    width: 50px;
    height: 75px;
    left: 0px;
    border-radius: 50px 50px 0 0;
    background: pink;
    transform: rotate(-45deg);
    animation: heart-pump 1s infinite;
}

.heart:after {
    content: "";
    position: absolute;
    width: 50px;
    height: 75px;
    left: 20px;
    border-radius: 50px 50px 0 0;
    background: pink;
    transform: rotate(45deg);
    animation: heart-pump-1 1s infinite;
}

Adding heart-beat animation

@keyframes heart-pump {
    to {
        transform: rotate(-45deg) scale(1.2);
    }
}

@keyframes heart-pump-1 {
    to {
        transform: rotate(45deg) scale(1.2);
    }
}

Javascript variables and it's data types

Vinod Godti — Fri, 30 Aug 2019 17:54:16 +0000

How to declare a variable in javascript?

There are 3 types of variable declaration.

First using "var" keyword, which is an old method to declare a variable.

Syntax: - var "Variable Name";
var x;//Now x value is undefined means we not defined the variable yet
var y=5; //Now y value is 5 as we assigned 5 to it

Second, using "let" keyword

let x=5; //Now x value is 5 as we assigned 5 to it

Difference between var and let keyword is variables declared with "let" keyword have block scope but in case of "var" have function scope.

see the code below

{
    let i=0;
}
console.log(i)//Throws ReferenceError:i is undefined

Here scope of i is limited inside the curly braces only. Outside curly braces variable i not available.

{
    var x=5;
}

console.log(x);//5

Here the scope of variable x is available inside and outside of the curly braces as variables declared with "var" keyword are hoisted(Only variable declarations moved on top of the function or program)
Above code executed like below

var x;
{
    x=5;
}
console.log(x)//5

Third, using const, If we declare a variable using the const keyword value which is assigned first will never be updated with other value.

const x=4;
x=5//Throws TypeError: Assignment to constant variable.

Data Types and Type Checking

There are 6 basic data types of variables that can be declared in javascript.

1.Number
2.String
3.Boolean
4.Object
5.Undefined
6.Null

One more data type in ES6 added is "Symbol"[I will cover this data type in my future blogs].
Javascript variables are dynamically typed which means if we declare variable and assign value to it then it will convert that value type.

var x=5;
console.log(x)//Type is Number
x="Ryu" // Type is String

We can check the type of the variables using typeof function

let x=5;
typeof(x) //Number

let x="Ryu";
typeof(x) //String

let x=true;
typeof(x) //Boolean

let x={};
typeof(x) //Object

let x=[];
typeof(x) //Object (In javascript array is also a object)

let x;
typeof(x) //Undefined

let x=null
typeof(x) //Object(It's a Javascript's exception is that typeof null is also a object)

Note:- This blog gives a brief about the variables and it's data types in Javascript. There are a lot of concepts regarding this topic that are not discussed in this blog.

Follow me on my (twitter)[https://twitter.com/GodtiVinod] and connect me on (LinkedIn)[https://www.linkedin.com/in/godti-vinod-37bb46a9/]

WebStorage APIs and it's uses in day to day coding

Vinod Godti — Sun, 18 Aug 2019 15:24:36 +0000

Web storage APIs are used to store data in the browser. Using web storage API we can store a minimum of 5MB data in desktop browsers.There is 2 mechanisms that are most commonly used in the modern web development world are Local storage and Session storage.

Why we should use Web storage?

To store user's specific data in their own browsers such as navigation history, Profile details and other data that are irrelevant to store in the server's database.
Some user's specific data loading from the server via API call may be very expensive in terms of time.

Let's dive into details

LocalStorage

In this web storage, we can store data in a key-value pair format.
Data stored in the web browser and data will persist even if the browser is closed. Data will remain as it unless and until we forcefully clear the data. We can store minimum of 5 MB or higher based on browser and platform.

Methods

Local storage has various methods to access, store, update and delete the data.

To save the data

window.localStorage.setItem("name","John Doe")

access the data

window.localStorage.getItem("name") //Output John Doe

remove the data from local storage

window.localStorage.removeItem("name") //Removes the data

update the data

window.localStorage("name","Nicolas")

To store the JSON data in local storage, We have to first convert JSON data into a string and then store it as localStorage accepts only string data.

let userData=JSON.stringify({"name":"Nicolas","email_id":"nicolas@abc.com"});
window.localStorage.setItem("userData",userData);

To access the data, Again we have to convert a string into JSON data

let userData=window.localStorage.getItem("userData");
console.log(JSON.parse(userData));

SessionStorage

sessionStorage is the same as localStorage except data will be available until the browser tab is closed. Data will be available in a particular session. It also can store a minimum of 5 MB data.

Methods

To save the data

window.sessionStorage.setItem("name","John Doe")

access the data

window.sessionStorage.getItem("name") //Output John Doe

remove the data from local storage

window.sessionStorage.removeItem("name") //Removes the data

This web storage API also accepts string data only.

Flex box layout for responsive designs(Part-2)

Vinod Godti — Tue, 30 Jul 2019 12:56:52 +0000

So far we have covered the flex-direction,justify-content,align-items, and flex-wrap properties and it's value to design/develop the responsive layout. There are more properties in the flex-box like the order of the flex items and align-self.

So let's get started

order

sometimes it is not sufficient to reversing the rows and column order of the container for the exact requirement to develop the layout. In that case, we can use order property to order the items inside the container.By default order of any item is 0 inside the container.we can use positive or negative integers as order values. Order property can only be applied to individual items.

<ul class="flex-box">
    <li class="home">Home</li>
    <li>About</li>
    <li>Portfolio</li>
    <li>Contact</li>
</ul>

.flex-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.flex-box :first-child {
    order: 1;
}
.flex-box :last-child {
    order: -1;
}

Highest ordered items are displayed later than that of lowest order items

In the above example "Home" will be displayed last than other 3 and "Contact" will be displayed first as it's order is lower than others

Flex items with same order will be displayed in the same order as source order such as one after other

Thus if you have 4 items with order values of 3, 2, 2, and 0 sets on them respectively, their display order would be 4th, 2nd, 3rd, then 1st.

The 3rd item displayed after the 2nd because it has the same order value and is after it in the source order.

Have look at the code pen link below to get a more clear picture.

align-self

This property can also be applied to individual items.It will accept the same values as align-items and its value for the specific item. Consider the below CSS code with the previous example's Html code.

.flex-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.flex-box :first-child {
    align-self: flex-start;
}

"Home" will be displayed at the beginning of the row. As align-self property and value flex-start was applied in the above code

To get more clarity in align self refer to the below code pen

Flex-box layout for responsive designs(Part-1)

Vinod Godti — Sun, 14 Jul 2019 19:47:04 +0000

In designing, Webpage or screen layout design is the most important part. If we could design the layout well than we can fit items inside the layout/container as per requirement. To design the layout we usually used display, position, and float. Before this layout module, we had used a table layout. Now we have a new feature in CSS to the layout which is display: flex, in other words, flexible layout. We can align and distribute space between the items in the container even if the size of items is unknown or dynamic.

Flex-box Layout module can be helpful for developers to develop responsive layouts easily without using the float and position.

Let's dig into more details of the flex-box layout or flexible layout.

To start with display flex, we need to define container with a display: flex.

.container{
    display:flex;
}

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

To align items horizontally,justify-content is used. It accepts the following values.

flex-start: items align to the left side of the container
flex-end: items align to the right side of the container
center: items align at the center of the container
space-between: items display with equal spacing between them
space-around: items display with equal space around them

See the code below

.container{
    display:flex;
    justify-content:flex-start;/*Item align at beginning of the container horizontally*/
}
<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

To align items vertically,align-item is used. It accepts the following values.

flex-start: items align to the top side of the container
flex-end: items align to the bottom side of the container
center: items align at the center of the container
baseline: items display at the baseline of the container
stretch: items are stretched to fit the container

See the code below

.container{
    display:flex;
    align-item:flex-end;/*Item align at the bottom vertically*/
}

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

One thing you should consider that the direction of the elements is positioned. For display flex, there is direction property which is flex-direction: row or column. In the case of "row", elements are placed the same as the text direction and in case of "column", elements are placed from top to bottom. There are 2 more values for the flex-direction which are "row-reverse" and "column-reverse".When "row-reverse" is applied to flex-direction then items are placed as opposite of text direction and in the case of "column-reverse" items are placed bottom to top.

.container{
    display:flex;
    flex-direction:row;
    justify-content:space-around;/*Space around the item in horizontal direction*/
}
.container{
    display:flex;
    flex-direction:column;
    align-item:flex-end;/*Item align at the bottom vertically */
}

When the direction is reversed then flex-start and flex-end values of the justify-content and align-items are also reversed means flex-start will start behaving like flex-end and vice-versa.

.container{
    display:flex;
    flex-direction:row-reverse;
    justify-content:flex-start/*items align to the right side of the container*/
}

.container{
    display:flex;
    flex-direction:column-reverse;
    align-item:flex-end;items align to the top side of the container
}

To make the new line or not when items size is more than the container size can be decided by flex-wrap property.flex-wrap property will accept the following values.

wrap: items wrap around to new line
wrap-reverse: items wrap around the new line in reverse order
nowrap: Every item is fit to a single line

See the code below

.container{
    display:flex;
    flex-wrap:wrap/*wraps to new line if items are not fitting in one line*/
}
.container{
    display:flex;
    flex-wrap:wrap-reverse/*wraps to new line if items are not fitting in one line in reverse direction*/
}
.container{
    display:flex;
    flex-wrap:nowrap/*Don't wraps to new line even if,items are not fitting in one line*/
}

Flex-box layout design will be helpful for developers to design the layout quickly and efficiently. The remaining concepts of flex-box will be covered in part-2 of this blog post.

CSS Media Types and Queries for Mobile Responsive Design

Vinod Godti — Sun, 23 Jun 2019 19:40:48 +0000

Nowadays mobile responsive websites and even web applications are very common. Everyone wants to develop their websites and web apps should be mobile responsive, which means clearly visible and interactive in every handheld devices. Due to the smartphone revolution, mobile browser users are more than desktop browsers. To target the mobile browser user every organization/individual is mostly preferred to develop mobile responsive websites or web apps. Every UI/UX developer should know about responsive and more interactive designs. In responsive design, CSS media queries play a very crucial role, why because using media queries we can write device-specific CSS code which is a basement of responsive design.

Let's dive into details of CSS media types and queries

In CSS2 @media rule was introduced for the first time to define the rules for different media types such as computer screens, handheld devices, printers, and TV screens but it not supported as expected for many devices except printers.

Later in CSS3 media queries were introduced by extending the @media from CSS2. Media queries look for the resolution of the screen, not the devices. As per the width and height of the screen, Media query rule will be applied.

Media Types

There are four media types

all (used for all media types)
screen (used for screens)
print (used for print devices)
speech (used for screen readers)

We can link the media specific external stylesheets in the header part of the HTML file.

<link rel="stylesheet" media='print' href="print.css">
<link rel="stylesheet" media='screen' href="styles.css">

Media Queries

Media queries rules are used to write the device-specific styles and syntax is

@media mediatype not|only|and|, (expressions){
    /*css code here*/
}

",", "and", "not", "only" are used to combine the two or more media queries to make complex media query.

and

let's write some CSS for mobile browsers smaller than 480px(iPhone)

@media screen and (max-width:480px){
    .nav{
        font-size:12px;
        display:block
    }
}

The above media query is combined with "and" condition, When the device screen width is 480px or less, then above styles are applied to nav class

Now we will target range of the screen width

@media screen and (min-width:480px) and (max-width:768px){
    .nav{
        color:green
    }
}

Font color will be green when screen width in between the 480px and 768px(tablet screen width)

For Tablets, iPads (portrait) screens, We can write following media query

@media screen (min-width:480px) and (min-width:1024px){
    .nav{
        color:grey
    }
}

For laptops/desktop screens

@media screen and (min-width:1224px){
    .nav{
        color:blue
    }
}

For large desktop screens

@media screen and (min-width:1884px){
    .nav{
        color:red
    }
}

For screen orientations

@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    .nav{
        color:blue;/*Color will be blue,When screen orientation is portrait and width in between 481px and 1024px*/
    }
}

@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    .nav{
        color:tomato;/* color will be tomato ,When screen orientation is landscape and width in between 481px and 1024px*/
    }
}

or(,)

@media (max-width:480px), (min-width:768px){
    .html{
        color:green
    }
}

Two separate media queries are joined with "," and styles will be applied when screen width is 480px or less and 768px or above.

only

"only" keyword is used to not load stylesheet by the browser which not support the media queries.

@media only screen (max-width:480px){
    html{
        color:green
    }
}

not

if we write a media query with "not" keyword, media query is true without not will become false. media query not supported browsers will not understand the "not" keyword, therefore associated styles are not applied.

@media not screen (max-width:480px){
    html{
        color:green
    }
}

Device screen widths for media queries

Mobile phone screens width : 480px
Tablets(ipad) screen width : 768px
Laptop and Desktop screen widths > 1024px

Note:-First design layout for the mobile phone screen and then use media queries for tablet and desktop screens, Thus development will be faster.

CSS selectors and it's Specificity(Priority to override other)

Vinod Godti — Sat, 08 Jun 2019 15:27:17 +0000

What's the problem when a developer didn't understand selectors clearly?

Sometime we apply styles to some html elements but don't work as per our code and finally end of with bug in our code. To avoid this kind of bugs developers should clearly understand the concept of css selectors and it's specificity.

The following are few other problems in applying styles to html elements.

How to apply style to all elements which is nested inside one element.
We face a challenge to select all odd and even li elements in a list and apply different styles to each.
If we have more than one elements to apply same styles to all.
We have to target only one element which should be unique in the entire html document.

To solve above problems we use the different types of selectors and apply styles to html elements.

What is selector in css ?

In general english ,we can say a thing that selects something. So like that selector in css is also selects or find the HTML elements.Selectors are used to target the html elements to apply styles on it.

Most commonly used and selectors are

HTMl element/Tag name Called as Type selector
class
id

In Css,we can have more selectors which are little bit tricky to understand like

pseudo classes
pseudo element
attribute selectors
universal selector
Combinator(multiple selectors combined)

Let's explore each selector one by one

Type Selector(By tag name)

We can select one or more elements by it's name.

p{
    color:green;
}

In the above code snippets, color green is applied to all p elements in html document.

Class(.)

class(.) selector identifies all the elements have the attribute class.If you have multiple elements with same class name then same styles are applied to all elements.See the code below.

.box{
    width:200px;
    height:200px;
    border:1px solid #ccc
}

<div class="box">
    I am box
</div>
<div class="box">
    I am 2nd box
</div>

Id(#)

id(#) selector identifies only one element have the attribute name id.If you have multiple elements with same id then it selects the first element.Check the code below

#avatar{
    width:100px;
    height:100px;
    border-radius:50%;
    border:1px solid #ccc
}
<div id="avatar">
    avatar
</div>
<div id="avatar">
    avatar2
</div>

The above style is applied only to the first div element.

All advanced selectors are identifies a specific element(s) when combined with commonly used selectors

Pseudo-Class(:)

As you know pseudo class is used to define state of the html element such as mouse hover or link after visited. So this can be used as selector to style the element when element in a particular state.

Common pseudo-classes are :hover,:visited,:link and :active.These are combined with other selectors to find the specific state of the element and apply style on it

a:hover{
    color:tomato /* On mouse hover,color of a is tomato color */
}
a:visited{
    color:red /* On linked visited,color of a is red */
}

We can select the a particular numbered children of the parent element by using the :nth-child() and a particular numbered children of the parent element counted from last by :nth-last-child.

li:nth-child(2){
    color:green
}

The above code selects every li element which is 2nd child of it's parent and apply color property to green.

li:nth-child(even){
    color:yellow /* selects the li element which is even child of it's parent */
}

li:nth-child(odd){
    color:yellow /* selects the li element which is odd child of it's parent */
}

li:nth-lat-child{
    color:blue /* selects the li element which is 2nd child but counting from last*/
}

Pseudo-Element(::)

Mostly common pseudo elements are ::before and ::after.These are used to place/add some content to specific part of the element such as before or after.

span::before{
    content:url('left-arrow.png);
    padding:2px   
}

span::after{
    content:url('right-arrow.png);
    padding:2px
}

Other rarely used pseudo elements are ::first-letter and ::first-line selects first letter of the word and first line of paragraph respectively.

p::first-letter{
    font-size:36px;
    font-weight:bold
}

p::first-line{
    font-weight:bold
}

Attribute Selector([attribute])

To apply styles to element that have specific attributes and attribute values,We can use attribute selector.

a[href="https://www.google.com"]{

    color:violet /* All a with href and it's value https://www.google.com are colored with violet. */
}

input[type="text"]{

    border:none /* No border property applied to all inputs with attribute type and it's value text. */
}

a[target]{
    background-color:cyan /* All a tags with attribute target have background color cyan */
}

Universal Selector(*)

This selector selects all the elements when it defined.

*{
    background:#f5f5f5
}

It selects all elements and apply background color as #f5f5f5

Combinator Selectors (+,>,space and ~)

We can combine two elements with +,> space and ~ to identify relative elements of two combined elements

Descendant Selector(space)

This type combination matches all the elements(element after space) which are descendants of specified element(element before space).See the example below.

div p{
    color:red /*It selects all the p elements which are inside div element*/
}
<div>
    <p>I am small paragraph.</p><!--Color is red-->
    <section>
        <p>I am paragraph inside section</p><!--Color is red-->
    </section>
</div>

Children Selector(>)

It matches all the elements(element after >) which are immediate children of specified element(element before >).

div > p{
    color:red /*It selects all the p elements which are only immediate children div element*/
}
<div>
    <p>I am small paragraph.</p><!--Color is red-->
    <section>
        <p>I am paragraph inside section</p><!--Color is black-->
    </section>
</div>

Adjacent Sibling selector(+)

It identifies the all elements(element after +) which are adjacent sibling elements of specific element(before +).

div + p{
    color:#ccc;/*selects all p elements that are placed immediately after div elements*/
}

General Sibling Selector(~)

This type of selector selects all elements that are siblings of a specified element.

div ~ p{
    color:#ccc;/*selects all p elements that are siblings of div elements*/
}

Selector Specificity(Priority to override other)

Specificity means how browser calculate and apply style to html elements (Which type of selector high priority to override other selector's property)

Find the list of selectors from high to low specificity/Overriding priority

id(#)
class(.) ,pseudo class(:),pseudo element(::) and attribute selector
Type Selector(Html Tag name)

Universal selector (*) and combinators (+, >, ~, space) have no effect on specificity.

We can not override the inline style from internal and external styles as inline style has high priority of overriding all external and internal styles.We can override inline styles from external and internal styles by using "!important" beside any property.

p{
    color:cyan!important;
}

<p style="color:red">I am paragraph</p>

Color of the paragraph is cyan as inline style color property is overridden by !important beside the property

Note:-I have written this blog for the newbie developers and my intention is to make understood all commonly used selectors to new comers to web coding world as there are many more selectors in css which are not covered in this blog.