Scribd
Upload
115 views6 pages

WD Practical 1

This document provides examples of CSS selector exercises to select elements based on type, class, ID, attributes, descendants, children and complex nested structures. It includes 12 exercises with various HTML elements like div, p, form, table etc. and requires writing CSS selectors to select elements according to the given scenarios. The goal is to practice using different CSS selector types to target specific elements.

Uploaded by

Pawan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
115 views6 pages

WD Practical 1

This document provides examples of CSS selector exercises to select elements based on type, class, ID, attributes, descendants, children and complex nested structures. It includes 12 exercises with various HTML elements like div, p, form, table etc. and requires writing CSS selectors to select elements according to the given scenarios. The goal is to practice using different CSS selector types to target specific elements.

Uploaded by

Pawan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

WD Practical 1 : CSS Selector

Exercise 1: Select by Element Type


1. Create an HTML document with the following elements:

<div class="box">Box 1</div>


<p>Paragraph 1</p>
<div class="box">Box 2</div>
<p>Paragraph 2</p>

2. Write CSS selectors to select:


a. All <div> elements. div
b. All <p> elements.

Exercise 2: Select by Class and ID


1. Create an HTML document with the following elements:

<div class="container">
<div
id="header">Header</div>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</div>

2. Write CSS selectors to select:


a. The element with the class "box."
b. The element with the ID "header."
c. All elements within the "container" div.

Exercise 3: Select by Descendant and Child


1. Create an HTML document with the following elements:
<ul class="menu">
<li>Home</li>
<li>About
<ul
class="submenu">
<li>History</li>
<li>Mission</li>
</ul>
</li>
<li>Contact</li>
</ul>

2. Write CSS selectors to select:


a. All <li> elements within the "menu" class.
b. All <li> elements within the "submenu" class.
c. Only the immediate children of the "menu" class.

Exercise 4: Select by Attribute


1. Create an HTML document with the following elements:
<a href="https://www.example.com">Example
Website</a>
<img src="image.jpg" alt="An Example Image">
<input type="text" placeholder="Enter your name">

2. Write CSS selectors to select:


a. All elements with a "href" attribute.
b. All images with an "alt" attribute.
c. All input elements with a "type" attribute equal to "text."
Exercise 5: Select by Descendant and Child
1. Create an HTML document with the following elements:
<div class="container">
<div
id="header">Header</div>
<div class="box">
<p>Box 1 Paragraph 1</p>
<p>Box 1 Paragraph 2</p>
</div>
<div class="box">
<p>Box 2 Paragraph 1</p>
<p>Box 2 Paragraph 2</p>
</div>
</div>
2. Write CSS selectors to select:
a. The <p> elements that are descendants of the element with the class "box."
b. The <p> elements that are children of the element with the class "box."
c. The <p> elements that are children of the element with the ID "header."

Exercise 6: Select Complex Descendant and Child Combinations


1. Create an HTML document with the following elements:

<ul class="menu">
<li>Home
<ul class="submenu">
<li>Submenu Item 1</li>
<li>Submenu Item 2
<ul class="sub-submenu">
<li>Sub-Submenu Item
1</li>
<li>Sub-Submenu Item
2</li>
</ul>
</li>
<li>Submenu Item 3</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>

2. Write CSS selectors to select:


a. The <li> elements that are direct children of the "menu" class.
b. The <li> elements that are descendants of the "menu" class but not within a
submenu.
c. The <li> elements that are descendants of the "submenu" class but not within a
sub-submenu.

Exercise 7: Selecting Elements Inside Tables


1. Create an HTML table structure as follows:
<table>
<tr>
<td>Row 1, Cell
1</td>
<td>Row 1, Cell
2</td>
</tr>
<tr>
<td>Row 2, Cell
1</td>
<td>Row 2, Cell
2</td>
</tr>
</table>

2. Write CSS selectors to select:


a. All <td> elements within the table.
b. Only the first <td> in each row.

Exercise 8: Selecting Nested Elements


1. Create an HTML structure as follows:
<div class="parent">
<div class="child">
<p>Paragraph 1</p>
</div>
<div class="child">
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
</div>

2. Write CSS selectors to select:


a. All <p> elements within a .child class.
b. Only the first <p> element within each .child class.
Exercise 9: Selecting Elements Within Forms
1. Create an HTML form structure as follows:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password"
name="password">
<button type="submit">Submit</button>
</form>

2. Write CSS selectors to select:


a. All <input> elements within the form.
b. The <label> elements that are associated with an <input> element.
c. The <button> element within the form.

Exercise 10: Complex Selection in a Deeply Nested List


1. Create an HTML structure as follows:
<ul class="list">
<li>Item 1</li>
<li>Item 2
<ul class="sublist">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3
<ul class="deep-
sublist">
<li>Deep Subitem
1</li>
<li>Deep Subitem
2</li>
</ul>
</li>
<li>Subitem 4</li>
</ul>
</li>
<li>Item 3</li>
</ul>

2. Write CSS selectors to select:


a. All <li> elements within the "list" class.
b. All <li> elements within the "sublist" class.
c. All <li> elements within the "deep-sublist" class.
Exercise 11: Complex Selection in Nested Divs
1. Create an HTML structure as follows:
<div class="parent">
<div class="child">
<div class="grandchild">
<div class="great-
grandchild">
<p>Paragraph 1</p>
</div>
<p>Paragraph 2</p>
</div>
</div>
</div>

2. Write CSS selectors to select:


a. The <p> element inside the "great-grandchild" class.
b. The <div> element with the class "grandchild" which contains the <p> with the
text "Paragraph 2."

Exercise 12: Complex Selection in Deeply Nested Forms


1. Create an HTML form structure as follows:
<form id="myForm">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password"
name="password">
</div>
<div class="form-group">
<button type="submit">Submit</button>
</div>
</form>

2. Write CSS selectors to select:


a. The <label> element is associated with the input field with the ID "username."
b. The submit button within the form with the ID "myForm."

You might also like