Full Stack Development Laboratory (23IT5653)
Task-4: Selector Forms.
Date: 06/08/2025 Roll Number: 238W1A1296
PRE LAB:
1. What is a CSS selector?
Answer: A CSS selector is a pattern used to select and style specific HTML elements.
2. Write the syntax of an ID selector in CSS.
Answer: #elementID { }
3. How do you select all elements of a specific class in CSS?
Answer: By using a class selector: .className { }
4. What does the universal selector * do in CSS?
Answer: It selects all elements on the page.
5. What is the difference between a child and descendant selector?
Answer: Child selector (A > B) selects direct children. Descendant selector (A B) selects
all nested descendants.
6. Which selector targets an element immediately following another?
Answer: The adjacent sibling selector: A + B
7. What does the :hover pseudo-class do?
Answer: It applies styles when the user hovers over an element.
8. Give an example of a pseudo-element selector.
Answer: p::first-letter styles the first letter of a paragraph.
9. How do you style all elements with the type="text" attribute?
Answer: input[type="text"] { }
10. What is the purpose of the ::before pseudo-element?
Answer: It inserts content before the actual content of an element .
IN-LAB:
1.Aim: Write a program to demonstrate Simple selector (element, id, class, group, universal).
Source Code:
<!DOCTYPE html>
<html><head><style>
h1 { color: red; } /* Element selector */
#myId { font-size: 24px; } /* ID selector */
.myClass { background-color: yellow; }/* Class selector */
p, li {font-style: italic; font-family:consolas;} /* Group selector */
* {margin: 25px;} /* Universal selector */
</style></head>
<body>
<h1 id="myId" class="myClass">Simple Selector</h1>
<p>This is a paragraph.</p>
<p>The technologies behind web development are:</p>
<ol><li>HTML</li>
<li>CSS</li>
<li>JavaScript</li></ol></body></html>
OUTPUT:
Result: The program is executed successfully.
2.Aim: To write a program for demonstration of combinator selectors.
Source Code:
<!DOCTYPE html>
<html>
<head><title>Combinator Selectors Demo</title>
<style> /* 1. Descendant Selector (space) */
div p { color: green;
font-weight: bold; }
/* 2. Child Selector (>) */
ul > li { color: blue; }
/* 3. Adjacent Sibling Selector (+) */
h2 + p { color: red; }
/* 4. General Sibling Selector (~) */
h3 ~ p { color: orange;
font-style: italic; }</style>
</head><body>
<h1>Combinator Selectors Example Task</h1>
<!-- Descendant selector -->
<div><p>This paragraph is a descendant.</p>
<section><p>Nested inside section inside div (still a descendant).</p></section>
</div> <!-- Child selector -->
<ul> <li>List Item 1 (child)</li>
<li>List Item 2 (child)</li>
<ol><li>Nested Item (not selected)</li></ol> </ul>
<!-- Adjacent sibling selector -->
<h2>Heading Level 2</h2>
<p>This paragraph is immediately after h2 (adjacent sibling).</p>
<p>This paragraph is not adjacent to h2.</p>
<!-- General sibling selector -->
<h3>Heading Level 3</h3>
<p>This paragraph is after h3 (general sibling).</p>
<p>This one too is after h3 (general sibling).</p> </body> </html>
OUTPUT:
Result: The Program is executed successfully.
3.Aim: To write a program for pseudo class, pseudo element, attribute selector.
Source Code:
<!DOCTYPE html>
<html><head><title>CSS Selectors Demo</title>
<style>/* Attribute Selector */
input[type="text"] {
background-color: #f0f0f0;
border: 2px solid #ccc;
padding: 5px;}
/* Pseudo-classes */
a:hover {color: red;
text-decoration: underline;}
li:nth-child(odd) {background-color: #e9e9e9;}
/* Pseudo-elements */
p::first-letter {
font-size: 150%;
color: blue;}
p::after {
content: " [Read more]";
color: gray;
font-size: 80%;}</style></head>
<body><h1>CSS Selectors Demonstration</h1>
<!-- Attribute Selector Example -->
<div><h2>Attribute Selector</h2>
<input type="text" placeholder="This input is styled with [type='text']">
<input type="password" placeholder="This input is not styled"></div>
<!-- Pseudo-class Example -->
<div><h2>Pseudo-classes</h2>
<a href="#">Hover over this link</a>
<ul><li>List item 1 (odd)</li>
<li>List item 2 (even)</li>
<li>List item 3 (odd)</li>
<li>List item 4 (even)</li></ul>
</div><!-- Pseudo-element Example -->
<div><h2>Pseudo-elements</h2>
<p>This paragraph has styled first letter and an after element.</p>
<p>Another paragraph with the same effects.</p>
</div></body></html>
OUTPUT:
RESULT: The program is executed successfully.
POST-LAB:
AIM: To design a single HTML file that demonstrates various types of CSS selectors —
simple, combinator, pseudo-class, pseudo-element, and attribute selectors — using a
Doraemon-themed layout. The goal is to implement medium-level styling with all CSS
written inline in the <style> tag, showcasing the functionality and behavior of different
selector types in a visually cohesive format.
SOURCE CODE:
<html><head><title>Doraemon Selector Showcase</title>
<style>
body,h1,p{font-family:Arial,sans-serif;margin:0;padding:0}
.doraemon{background:#b3e5fc;color:#01579b;padding:15px;border-radius:10px}
#main-title{text-align:center;margin:20px 0;font-size:2em}
h2,h3{color:#0288d1;margin-bottom:10px}
.friends p{margin-left:15px}
.friends>div{margin:10px 0}
.tools+p{color:#d84315;font-weight:bold}
.tools~p{font-style:italic}
.doraemon:hover{background:#81d4fa}
.friends div:first-child{background:#e1f5fe}
.tools-list li:last-child{color:#c2185b}
.doraemon::before,.doraemon::after{content:" ";font-size:1.5em}
.quote::first-letter{font-size:2em;color:#ff5722}
a[href]{text-decoration:none;color:#1565c0}
a[target="_blank"]{font-weight:bold}
img[alt~="Doraemon"]{border:3px solid #0288d1;border-radius:10px;width:150px}
</style></head>
<body><div class="container"><h1 id="main-title">Doraemon CSS Selector Demo</h1>
<div class="doraemon">Doraemon is a robotic cat who travels back in time from the 22nd
century to aid a boy named Nobita.</div>
<hr><h2>Doraemon's Friends (Combinators)</h2>
<div class="friends">
<div>Nobita</div><div>Shizuka</div><div>Gian</div><div>Suneo</div>
<p class="quote">Friends always stick together, even in the toughest times.</p></div>
<hr><h3>Gadgets (Pseudo-classes & Attribute)</h3>
<div class="tools"><ul class="tools-list">
<li>Bamboo Copter</li><li>Anywhere Door</li><li>Time Machine</li><li>Memory
Bread</li></ul></div>
<p>This text follows the tools list and demonstrates adjacent sibling selector.</p>
<p>Here's another paragraph to show general sibling selector.</p>
<hr><h3>Resources</h3>
<p><a href="https://en.wikipedia.org/wiki/Doraemon" target="_blank">Learn more about
Doraemon</a></p>
<p><img src="https://upload.wikimedia.org/wikipedia/en/0/0d/Doraemon_character.png"
alt="Doraemon Character"></p>
</div></body></html>
OUTPUT:
RESULT: The Program is executed successfully.
