Scribd
Upload
9 views

week4

The document provides an overview of CSS selectors, including simple selectors, combinator selectors, pseudo-class selectors, pseudo-element selectors, and attribute selectors. It includes examples of each type, demonstrating how to apply styles to HTML elements based on various criteria. The document also explains the functionality of different selectors with corresponding HTML and CSS code snippets.

Uploaded by

anitha
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

week4

The document provides an overview of CSS selectors, including simple selectors, combinator selectors, pseudo-class selectors, pseudo-element selectors, and attribute selectors. It includes examples of each type, demonstrating how to apply styles to HTML elements based on various criteria. The document also explains the functionality of different selectors with corresponding HTML and CSS code snippets.

Uploaded by

anitha
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

4. Selector forms a.

Write a program to apply different types of selector


forms i. Simple selector (element, id, class, group, universal) ii. Combinator
selector (descendant, child, adjacentsibling, general sibling) iii. Pseudo-class
selector iv. Pseudo-element selector v. Attribute selector
What is a Selector in CSS?
A CSS selector is a pattern used to select and style HTML elements. It defines
which elements in the HTML document will be affected by the CSS rules.
Types of CSS Selectors
1. Simple Selectors (Target elements based on name, id, class)
2. Combinator Selectors (Define relationships between elements)
3. Pseudo-class Selectors (Select elements based on their state)
4. Pseudo-element Selectors (Style specific parts of elements)
5. Attribute Selectors (Select elements based on attributes)

Summary
● Universal Selector (*) → Applies to all elements.
● Element Selector (h1) → Targets specific elements.
● ID Selector (#unique) → Styles a single unique element.
● Class Selector (.highlight) → Styles multiple elements with the same
class.
● Group Selector (h2, h3) → Styles multiple elements at once.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors Example</title>
<style>
/* Universal Selector */
*{
font-family: Arial, sans-serif;
}

/* Element Selector */
h1 {
color: blue;
}

/* ID Selector */
#unique {
background-color: yellow;
padding: 10px;
}

/* Class Selector */
.highlight {
color: red;
font-weight: bold;
}

/* Group Selector */
h2, h3 {
color: green;
}
</style>
</head>
<body>
<h1>Element Selector Example</h1>
<h2>Group Selector Example (h2)</h2>
<h3>Group Selector Example (h3)</h3>
<p id="unique">This is an ID selector example.</p>
<p class="highlight">This is a Class selector example.</p>
<p>This is a normal paragraph.</p>
</body>
</html>
Combinator Selectors in CSS
Combinator selectors define relationships between elements in an HTML
document. They help apply styles based on how elements are structured.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Combinator Selectors</title>
<style>
/* Descendant Selector (any <p> inside a <div>) */
div p {
color: red;
}

/* Child Selector (only direct <p> children of <div>) */


div > p {
color: blue;
}

/* Adjacent Sibling Selector (first <p> after <h1>) */


h1 + p {
color: green;
}

/* General Sibling Selector (all <p> after <h1>) */


h1 ~ p {
color: orange;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>This paragraph is adjacent to h1 (green).</p>
<p>This paragraph is a general sibling of h1 (orange).</p>

<div>
<p>This paragraph is inside div (red).</p>
<section>
<p>This paragraph is inside a section within div (red, due to descendant
selector).</p>
</section>
<p>This paragraph is a direct child of div (blue).</p>
</div>
<p>This paragraph is outside div and not affected.</p>
</body>
</html>

Explanation
1. Descendant Selector (div p)
o Applies to all <p> elements inside a <div>, even if deeply nested.
o Example: <p> inside <section> within <div> is affected.
2. Child Selector (div > p)
o Applies only to direct <p> children of <div>.
o Example: The last <p> inside <div> is blue, but the nested one is
not.
3. Adjacent Sibling Selector (h1 + p)
o Styles only the first <p> that comes immediately after <h1>.
o Example: The first <p> after <h1> is green.
4. General Sibling Selector (h1 ~ p)
o Styles all <p> elements that appear after <h1>.
o Example: All <p> elements after <h1> are orange.
Pseudo-Class Selectors in CSS
A pseudo-class is a keyword added to a CSS selector that defines a special state of an
element. It allows you to style elements based on user interaction, position, or other
conditions without modifying the HTML.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Pseudo-Class Selectors</title>
<style>
/* Hover Effect */
button:hover {
background-color: blue;
color: white;
}

/* Focus Effect */
input:focus {
border: 2px solid green;
outline: none;
}

/* nth-child Example */
li:nth-child(odd) {
color: red;
}

/* First Child */
p:first-child {
font-weight: bold;
}

/* Last Child */
p:last-child {
color: blue;
}

/* Not Selector */
p:not(.special) {
color: gray;
}
</style>
</head>
<body>
<h1>Pseudo-Class Selector Example</h1>

<button>Hover Over Me</button>

<br><br>

<input type="text" placeholder="Focus on me">

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

<div>
<p>First paragraph (first-child, bold).</p>
<p class="special">Second paragraph (special class, not affected
by :not).</p>
<p>Third paragraph (gray, affected by :not).</p>
<p>Last paragraph (last-child, blue).</p>
</div>
</body>
</html>
Explanation
1. :hover → Changes button color when hovered.
2. :focus → Highlights input when focused.
3. :nth-child(odd) → Styles every odd <li> element in red.
4. :first-child → Makes the first <p> bold.
5. :last-child → Colors the last <p> blue.
6. :not(.special) → Styles all <p> elements except those with class special.

You might also like