Scribd
Upload
6 views13 pages

Week 4

The document provides a comprehensive guide on different types of CSS selectors, including simple selectors (element, ID, class, group, universal), combinator selectors (descendant, child, adjacent sibling, general sibling), pseudo-class selectors, pseudo-element selectors, and attribute selectors. Each section includes descriptions and example code demonstrating how to apply these selectors in HTML and CSS. The examples illustrate the practical application of each selector type to style various HTML elements.

Uploaded by

DEVIKA G
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
6 views13 pages

Week 4

The document provides a comprehensive guide on different types of CSS selectors, including simple selectors (element, ID, class, group, universal), combinator selectors (descendant, child, adjacent sibling, general sibling), pseudo-class selectors, pseudo-element selectors, and attribute selectors. Each section includes descriptions and example code demonstrating how to apply these selectors in HTML and CSS. The examples illustrate the practical application of each selector type to style various HTML elements.

Uploaded by

DEVIKA G
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/ 13

4.

Selector forms

a. Write a program to apply different types of selector forms

● Simple selector (element, id, class, group, universal)

● Combinator selector (descendant, child, adjacent sibling, general sibling)

● Pseudo-class selector

● Pseudo-element selector

● Attribute selector

--------------------------------@@@@@@@@@@@@------------------------------

Write a program to apply different types of selector forms

A.Simple selector (element, id, class, group, universal)

Description:

A simple HTML and CSS example that demonstrates different types of selectors, including element, ID,
class, group, and universal selectors.

This program applies:

1. Element Selector: Styles all <h1> elements with a blue color and centered alignment.
2. ID Selector: Targets the element with the unique id="unique-paragraph".
3. Class Selector: Applies styles to elements with the class highlight.
4. Group Selector: Targets <p> and <li> elements together for shared styling.
5. Universal Selector: Applies global styling to reset margins, padding, and box-sizing for all
elements.

Source Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS Selector Types</title>


<style>

/* Simple Selector: Element */

h1 {

color: blue;

text-align: center;

/* Simple Selector: ID */

#unique-paragraph {

font-size: 18px;

color: green;

/* Simple Selector: Class */

.highlight {

background-color: yellow;

font-weight: bold;

/* Group Selector */

p, li {

font-family: Arial, sans-serif;

line-height: 1.6;
}

/* Universal Selector */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

</style>

</head>

<body>

<h1>CSS Selector Examples</h1>

<p id="unique-paragraph">This is a paragraph with a unique ID.</p>

<p class="highlight">This paragraph is highlighted using a class selector.</p>

<ul>

<li>This is the first list item.</li>

<li class="highlight">This list item is also highlighted.</li>

<li>This is the third list item.</li>

</ul>

</body>
</html>

Output:

B. Combinator selector (descendant, child, adjacent sibling, general sibling)

Description:

The program has been updated to include examples of combinator selectors:

1. Descendant Selector (div p): Styles all <p> elements that are descendants of a <div>.
2. Child Selector (div > p): Styles only the <p> elements that are direct children of a <div>.
3. Adjacent Sibling Selector (h1 + p): Styles the <p> element immediately following an <h1>.
4. General Sibling Selector (h1 ~ p): Styles all <p> elements that are siblings of an <h1>.

Source Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS Selector Types</title>

<style>

/* Simple Selector: Element */


h1 {

color: blue;

text-align: center;

/* Simple Selector: ID */

#unique-paragraph {

font-size: 18px;

color: green;

/* Simple Selector: Class */

.highlight {

background-color: yellow;

font-weight: bold;

/* Group Selector */

p, li {

font-family: Arial, sans-serif;

line-height: 1.6;

/* Universal Selector */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}
/* Combinator Selectors */

/* Descendant Selector */

div p {

color: darkblue;

/* Child Selector */

div > p {

border: 1px solid red;

padding: 5px;

/* Adjacent Sibling Selector */

h1 + p {

font-style: italic;

/* General Sibling Selector */

h1 ~ p {

text-decoration: underline;

</style>

</head>

<body>

<h1>CSS Selector Examples</h1>

<p id="unique-paragraph">This is a paragraph with a unique ID.</p>


<p class="highlight">This paragraph is highlighted using a class selector.</p>

<div>

<p>This paragraph is a descendant of a div.</p>

<p>This paragraph is also a child of the div.</p>

<span>

<p>This nested paragraph is a descendant, but not a direct child.</p>

</span>

</div>

<p>This paragraph follows the h1 and is an adjacent sibling.</p>

<p>This paragraph is a general sibling of the h1.</p>

<ul>

<li>This is the first list item.</li>

<li class="highlight">This list item is also highlighted.</li>

<li>This is the third list item.</li>

</ul>

</body>

</html>

Output:
C. Write a program to apply different types of selector forms

● Pseudo-class selector

● Pseudo-element selector

● Attribute selector

Description:

1. Pseudo-class Selector

 a:hover: Applies styles when a user hovers over a link.


 li:first-child: Styles the first list item in a list.
 li:last-child: Styles the last list item in a list.

2. Pseudo-element Selector

 p::first-line: Styles the first line of every paragraph.


 p::before: Adds content (an arrow) before every paragraph.

3. Attribute Selector

 input[type="text"]: Styles input elements of type text.


 input[placeholder]: Styles input elements with a placeholder attribute.

Source Code:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS Selector Types</title>

<style>

/* Simple Selector: Element */

h1 {

color: blue;

text-align: center;

/* Simple Selector: ID */

#unique-paragraph {

font-size: 18px;

color: green;

/* Simple Selector: Class */

.highlight {

background-color: yellow;

font-weight: bold;

/* Group Selector */

p, li {

font-family: Arial, sans-serif;

line-height: 1.6;

}
/* Universal Selector */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

/* Combinator Selectors */

/* Descendant Selector */

div p {

color: darkblue;

/* Child Selector */

div > p {

border: 1px solid red;

padding: 5px;

/* Adjacent Sibling Selector */

h1 + p {

font-style: italic;

/* General Sibling Selector */

h1 ~ p {

text-decoration: underline;
}

/* Pseudo-class Selectors */

a:hover {

color: red;

text-decoration: underline;

li:first-child {

font-weight: bold;

li:last-child {

font-style: italic;

/* Pseudo-element Selectors */

p::first-line {

font-size: larger;

font-weight: bold;

p::before {

content: "\25BA ";

color: gray;

/* Attribute Selectors */

input[type="text"] {
border: 2px solid blue;

padding: 5px;

input[placeholder] {

font-style: italic;

color: gray;

</style>

</head>

<body>

<h1>CSS Selector Examples</h1>

<p id="unique-paragraph">This is a paragraph with a unique ID.</p>

<p class="highlight">This paragraph is highlighted using a class selector.</p>

<div>

<p>This paragraph is a descendant of a div.</p>

<p>This paragraph is also a child of the div.</p>

<span>

<p>This nested paragraph is a descendant, but not a direct child.</p>

</span>

</div>

<p>This paragraph follows the h1 and is an adjacent sibling.</p>

<p>This paragraph is a general sibling of the h1.</p>


<ul>

<li>This is the first list item.</li>

<li class="highlight">This list item is also highlighted.</li>

<li>This is the third list item.</li>

</ul>

<a href="#">Hover over this link</a>

<form>

<input type="text" placeholder="Enter your name">

<input type="submit" value="Submit">

</form>

</body>

</html>

Output:

You might also like