DEV Community: Shubh Ujala

CSS Selectors 101: Targeting Elements with Precision

Shubh Ujala — Sun, 01 Feb 2026 13:01:20 +0000

First of all let's discuss why do we need CSS?
Just take a simple example , let say you have created a navbar using HTML and you have added all the functionalities in it but without CSS this is how your navbar will looks like will looks like

from any angle is it looks like nav bar? NO, right now let's apply some CSS in it

Now see which feels more engaging , obiously second one means after applying CSS, that's why we need CSS to style the webpages.

Now let's discuss the technical definition of CSS

CSS stands for Cascading Style Sheets, here Cascading term means overriding, this is exactly what we are doing We are overriding the default properties of HTML tags given by browser, and Yes we do have special name for the styling given by browser which is known as User Agent Style.

How to give styles in CSS

We are giving styling in CSS using selectors.

What are Selectors?

Selectors name itself is defining it's definition, basically it is used to select the elements to give styling to them, there are mainly 4 ways to select the element :

1. Element Selector

with the help of element selector , we can target a particular element by using HTML tag and apply the styling in that particular element also we can also apply the styling to it's child element let see how : Here you can see in HTML file , we have a <nav> tag and we have applied the styling to nav tag, so this is how using element selector we can apply the styling. Also We can also apply the stylings to the child elements of any tag using element tag Here you can see we have two child elements <h3> <h4> of nav so this is how we are able to apply the stylings to the child element using element tag.

Where it fails?
When we have multiple same elements inside the parent elements and we don't want to apply the stylings to all elements , this is where it fails
Example :
Here you can see we want different styles for each child of <nav> element but by using the element tag we are unable to do that.

2. Class Selectors

Earlier , using element tag we were not able to give the different styling when we have multiple childs , so class selectors solves this problem for us, basically we have to give different classes to our HTML tag and by using class selectors we can apply different styling for each tags. Let' implement it practically
Syntax to use class selector, We have to use dot(.) in front of the class name and then apply styling , you can refer the example's syntax below

Also we can give multiple class names to tag seperated by spaces like this class = "main div1", and the corresponding styles that we have given is going to applied.

3. ID Selectors

It is another way to target HTML tags to give styling, an ID is used to uniquelly identify any tag so it is generally recommneded to use different id names for multiple tags, you can use same names as well there is no issue with that also.
Syntax to use ID selectos, We have to use # before the name of id , refer the below example's syntax

4. Universal Selector (*)

With the help of universal selectors we can apply the styling to the entire documents, Syntax to use universal selector Example : Here you can see I haven't targeted any particular element instead i have just written (*) and apply the styling and it is getting applied on the whole document this is how universal selectors works.

Grouping CSS selectors

By grouping means, if we want to apply the same styling to the different elements so without grouping we have to write is again and again but with the help of grouping we just have to write it once and done, CSS is going to be applied on all the different elements.

Now let's see the syntax for grouping the element in CSS
We have to use it like this (refer images)
Examples :
1. using element tags only
2. when we have classes and id's with element (generally we have it) then this is how it should be done.

Descendant CSS selectors

By decendent selector means, We are giving styles to the elements which are present inside other elements
Example :

In the above example we are targetting the h2 tag whose path is like this

Main -> div -> h2

that's why while using decendant selector we have used main div h2 means we have to go to the main tag inside that we have to go to div and inside div finnaly we have to style h2

So this is how it works in CSS.

Basic selector pripority in CSS

As we have discussed the way of styling the element in CSS, so there is one question suppose we have applied the styling to using (*) universal selectors

 * {
    color: yellow;
   }

and also we have one div in which some text is there and in the div also we have applied the styling like this

 .div{
    color : red;
 }

Then what should be the color of the content in the div? will it be yellow or black?
let see :
In this example we have used universal selector to give text-color

But ass soon as we have given the styling using class selector it's color changes from yellow to red.

let's add one id to it and let's again try to change the text color using id selector

That's crazy now it is showing pink color , means id is having more priority than class selectors , and class is having more priority than universal , means there must be a priority in CSS.

here is the priority list

[ref of image : GeekForGeeks]

Hope you enjoyed reading.

TCP vs UDP: When to Use What, and How TCP Relates to HTTP

Shubh Ujala — Sun, 01 Feb 2026 07:48:49 +0000

In this blog we are going to talk about the protocols. you must be wondering what exactly is protocols?

protocols is nothing but just a fancy name of rules.
In simpler terms, Protocol is a set of some agreed rules based on that two system communicate with each other. without these rules we can’t communicate reliably.

Why we need protocols?

Because without these rules or protocols internet don’t know where or whom to send the data. these protocols help us to address the reciever and sender so the communication between them can be as smooth as possible without worring about the reliablility

TCP (Transmission-Control-Protocol)

it is a protocol that allows devices to communicat reliably over a network. it ensures that data reaches the destination correctly ans in the right order, even if part of the network are slow or less reliable.
TCP establishes a logical connection between the sender and receiver before data transmission begins.
It ensures that data is delivered accurately and in the same order in which it was sent using acknowledgements and sequence numbers.

Before sending any data it establishes a connection between sender and reciever for secure and reliable data transfer and the process that is used by it is called 3-Way handshake and also the proccess which it used to terminate the connection is known as 4-Way handshake

How TCP works?

3-Way Handshake → Before sending any data TCP establishedd a connection between client and server for secure and reliable data transfer.
Segmenting → When an application sends data (like an email) , TCP breaks that data into small chunks called segments. this makes it easier to send large amount of data over the network reliably, Each segment has header containing information like sequence number, ports and flags. it looks like this:

Routing via IP → once TCP creates segments of data they are handed to IP and IP is responsible for delievering the segments from the client to the server.
Acknowladgments (ACKs) → the reciever(client) sends an ACKs for every segment and this tells the sender that data has arrived safely , Suppose if ACKs is not revieved , TCP assumes that the segment was lost and triggers retransmission.
Retransmission → if sender doesnt recieve an acknowledgment within a certain time then it resends the missing segment, This ensures no data is lost making TCP reliable.
Flow & Error Control →
Flow Control : TCP prevents the sender from sending too much data too quickly for the server to handle.
Error Control :TCP checks for corrupt segment using checksums and request transmission if needed.

Together, these mechanisms ensure data is delivered reliably and efficiently, without overloading the network or the receiver

UDP (User-Datagram-Protocol)

UDP is a protocol that provides fast, connectionless and lightweight communication between processes.
it doesn’t guarantee delivery, order or error checking making it suitable for real-time and time-sensitive application such as video streaming,audio call, gaming or live streaming.

UDP Header

How TCP and UDP are different from each other

When to use TCP?

TCP can be used in the following scenarios

Text Communication → We know we cannot tolerate any discrepeancy in texting between sender and reciever. Hence we have to use the protocol which is reliable that’s why we prefer TCP.
Transfer of files or FTP → TCP is used in File transfer when we cannot tolerate the loss of data and receiving the data incorrect order is of utmost importance.
HyperText Transfer Protocol → Since TCP provides use inorder data, error control and flow control that why it is prefer while accessing the web pages.

When to use UDP?

Real-Time Application → Because UDP reduces the latency , which is crucial for real-time application such as video streaming or online gaming
Broadcast and Multicast Transmission → it supports broadcast and multicast sending capabbilities inherently, allowing information to be sent to multiple recievers easily and quickly, useful in the scenarios like updating live statistics on a sports website.
High-Speed Data Transfer → UDP is suitable for scenarios where the volume of data is enormous, and retransmission overhead is not acceptable, such as in certain file transfer applications.

Real World Analogy TCP vs UDP

TCP : Courier Service

Imagine you send important document using courier service , then what happens? you get a tracing number, the reciever must have to sign after delievery, if page is missing then it is resent, page arrive in correct order.

this whole process exactly explains how TCP works.

Now Imagine it like this :

Courier recepit → TCP acknowledgment
Re-sending lost pages → Retransmission
Proper order → Sequencing

→ TCP used when accuracy matters more than speed

UDP : Phone call

Imagine you are talking on a phone call , then what happenens? if you missed a word then speaker dosen’t repeat, conversation continues wihtout waiting , speed matters more than perfection

This is how UDP works.

Now Imagine it like this :

No conformation → No acknowledgment
Missed word → lost packets
Real-time flow → low latency

→ UDP used when speed matters more than accuracy

What is HTTP and where it fits

HTTP (Hypertext Transfer Protocol) is a core internet protocol that defines how data is exchangesd between client and server on the web.

Enables communication between web browsers and web servers
forms the foundation of data transfer on the World wide web.
Defines rules for requesting and delivering data between system

[ref of image : GeekforGeeks]

Note : it is an application-layer protocol used implicitly by web browser to transfer text, images and multimedia accross distributed , hypermedia-based web systems.

Common confusions →

Are HTTP and TCP same?

Answer is No, TCP is transport layer protocol which is responsible for reliable data delievry , ensuring data packets arrive in order, without packet loss. whereas HTTP is an application layer protocol , it defines how web data is requested and sent such as web pages, forms and APIs
infact HTTP depends on TCP. because HTTP uses TCP to safely send it’s request and response but it does not handle reliability itself.
In simpler terms TCP handles how data travels , while HTTP handles what the data means

Are they work on the same layer?

Answer is again No. TCP works on transport layer where as HTTP works on Application layer

Relationship between TCP and HTTP →

As we know TCP and HTTP both works on different layers , and we also know that HTTP requires TCP , then the main question arises is How they interact?

So, TCP first creates a reliable connection between client and server then HTTP sends request and responses through that TCP connection, while TCP ensure that HTTP data is delievered safely and completely

HTTP relies on TCP for reliable communication while TCP does not understand or depend on HTTP

This is the Core relaionship between TCP and HTTP.

Hope you enjoyed reading ❤️