Scribd
Upload
14 views5 pages

Selectors HTML 4TH PRG

The document provides examples of various CSS selectors including simple selectors, combinator selectors, pseudo-class selectors, pseudo-element selectors, and attribute selectors. Each section includes HTML code demonstrating the application of these selectors to style elements based on their type, relationship, state, or attributes. The examples illustrate how to manipulate the appearance of text, backgrounds, and other properties using CSS.

Uploaded by

b.c.v.k.2oo5
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
14 views5 pages

Selectors HTML 4TH PRG

The document provides examples of various CSS selectors including simple selectors, combinator selectors, pseudo-class selectors, pseudo-element selectors, and attribute selectors. Each section includes HTML code demonstrating the application of these selectors to style elements based on their type, relationship, state, or attributes. The examples illustrate how to manipulate the appearance of text, backgrounds, and other properties using CSS.

Uploaded by

b.c.v.k.2oo5
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 5

SIMPLE SELECTORS

<!DOCTYPE html>
<html>
<head>
<title>Simple Selectors Example</title>
<style>
/* Universal Selector */
*{
font-family: Arial, sans-serif; /* Applies to all elements */
}

/* Element Selector */
p{
color: blue; /* All <p> elements will have blue text */
}

/* Class Selector */
.highlight {
background-color: yellow; /* Elements with class="highlight" will have a yellow background */
}

/* ID Selector */
#header {
font-size: 24px; /* The element with id="header" will have a larger font size */
color: green;
}

/* Group Selector */
h1, h2, h3 {
color: red; /* All <h1>, <h2>, and <h3> elements will have red text */
}
</style>
</head>
<body>
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<p>This is a paragraph.</p>
<p class="highlight">This paragraph is highlighted.</p>
<div id="header">This is the header.</div>
</body>
</html>

Combinator selectors :

Combinator selectors in CSS are used to define relationships between elements.


There are four types of combinators:
Descendant Combinator ( )
Targets elements that are descendants of a specified element.
Child Combinator (>)
Targets elements that are direct children of a specified element.
Adjacent Sibling Combinator (+)
Targets the immediately following sibling of a specified element.
General Sibling Combinator (~)
Targets all following siblings of a specified element.

<!DOCTYPE html>
<html>
<head>
<title>Combinator Selectors Example</title>
<style>
/* Descendant Combinator */
div p {
color: blue; /* All <p> elements inside <div> */
}

/* Child Combinator */
div > span {
background-color: yellow; /* Only <span> elements directly inside <div> */
}

/* Adjacent Sibling Combinator */


h2 + p {
font-style: italic; /* The <p> immediately after <h2> */
}

/* General Sibling Combinator */


h3 ~ p {
color: green; /* All <p> elements after <h3> */
}
</style>
</head>
<body>
<div>
<p>This is a paragraph inside a div (descendant combinator).</p>
<span>This is a span directly inside a div (child combinator).</span>
<p>This is another paragraph inside a div.</p>
</div>

<h2>Heading 2</h2>
<p>This paragraph is styled because it is adjacent to h2 (adjacent sibling combinator).</p>
<p>This paragraph is not styled.</p>

<h3>Heading 3</h3>
<p>This paragraph is styled because it is a sibling of h3 (general sibling combinator).</p>
<p>This paragraph is also styled.</p>
</body>
</html>

PSEUD0-CLASS SELECTORS
Pseudo-selectors in CSS are used to style elements based on their state or position.
They are divided into two main categories:
Pseudo-classes: Target elements based on their state (e.g., :hover, :focus, :nth-child).
Pseudo-elements: Target specific parts of an element (e.g., ::before, ::after, ::first-
line).

<!DOCTYPE html>
<html>
<head>
<title>Pseudo-Selectors Example</title>
<style>
/* Pseudo-classes */
a:hover {
color: red; /* Changes link color to red on hover */
}
p:first-child {
font-weight: bold; /* Makes the first <p> element bold */
}

li:nth-child(odd) {
background-color: lightgray; /* Styles odd list items with a light gray background */
}

input:focus {
border: 2px solid blue; /* Adds a blue border to the input field when focused */
}

/* Pseudo-elements */
p::first-line {
font-size: 1.2em; /* Makes the first line of every <p> larger */
}

p::after {
content: " (Read more)"; /* Adds text after every <p> */
color: green;
}
</style>
</head>
<body>
<h1>Pseudo-Selectors Example</h1>

<p>This is the first paragraph. It will have a bold font and a larger first line.</p>
<p>This is the second paragraph. It will also have a larger first line and some additional text at the end.</p>

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>

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

<input type="text" placeholder="Click here to focus">


</body>
</html>

PSEUDO ELEMENT SELECTOR

Pseudo-element selectors in CSS are used to style specific parts of an element.


They are denoted by double colons (::) and allow you to target things like the first
line, first letter, or content before/after an element.

<!DOCTYPE html>
<html>
<head>
<title>Pseudo-Element Selectors Example</title>
<style>
/* ::first-line - Styles the first line of a block-level element */
p::first-line {
font-weight: bold; /* Makes the first line bold */
color: blue; /* Changes the first line color to blue */
}

/* ::first-letter - Styles the first letter of a block-level element */


p::first-letter {
font-size: 2em; /* Makes the first letter larger */
color: red; /* Changes the first letter color to red */
}

/* ::before - Inserts content before an element */


h1::before {
content: "🌟 "; /* Adds a star emoji before the heading */
}

/* ::after - Inserts content after an element */


h1::after {
content: " 🌟"; /* Adds a star emoji after the heading */
}

/* ::selection - Styles the text selected by the user */


::selection {
background-color: yellow; /* Changes the background color of selected text */
color: black; /* Changes the color of selected text */
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph. The first line will be bold and blue, and the first letter will be large and red.</p>
<p>This is another paragraph. Pseudo-elements allow you to style specific parts of the content.</p>
</body>
</html>

ATTRIBUTE SELECTOR

Attribute selectors in CSS allow you to target elements based on


their attributes or attribute values. They are powerful tools for styling specific
elements that have certain attributes or match specific patterns.

<!DOCTYPE html>
<html>
<head>
<title>Simple Attribute Selectors Example</title>
<style>
/* [attribute] - Styles elements with a specific attribute */
a[target] {
color: red; /* Links with a 'target' attribute will be red */
}

/* [attribute="value"] - Styles elements with an exact attribute value */


input[type="text"] {
background-color: yellow; /* Text input fields will have a yellow background */
}

/* [attribute^="value"] - Styles elements whose attribute value starts with "value" */


a[href^="https"] {
font-weight: bold; /* Links starting with "https" will be bold */
}

/* [attribute$="value"] - Styles elements whose attribute value ends with "value" */


a[href$=".pdf"] {
color: green; /* Links ending with ".pdf" will be green */
}
</style>
</head>
<body>
<h1>Simple Attribute Selectors Example</h1>
<p>Links with a target attribute are red:</p>
<a href="https://example.com" target="_blank">External Link</a><br>
<a href="https://example.com">Internal Link</a><br>

<p>Text input fields have a yellow background:</p>


<input type="text" placeholder="Enter text"><br>
<input type="password" placeholder="Enter password"><br>

<p>Links starting with "https" are bold:</p>


<a href="https://example.com">HTTPS Link</a><br>
<a href="http://example.com">HTTP Link</a><br>

<p>Links ending with ".pdf" are green:</p>


<a href="document.pdf">PDF Document</a><br>
<a href="document.docx">Word Document</a><br>
</body>
</html>

You might also like