Q.s 1:- Explain difference between pseudo elements and pseudo classes
Q.s 2 :- Give any example of ::selection , ::placeholder , ::after.
Q.s 3 :- Give any example of :focus , :nth-child.
1 Like
1.pseudo class means it represents a state of a selector like :hover, :active etc… it starts with a single colon(
pseudo elements means it will select elements like ::after, ::before and etc…it starts with a double colon(:
1 Like
ANS 1: PSEUDO CLASS ARE USED TO TAARGET STATE SINGLE COLON : ARE USED FOR CLASS
PSEUDO ELEMENT ARE USED TO TARGET SPECIFIC PART OF ELEMENT :: DOUBLE COLON FOR ELEMENT
ANS 2; PLACEHOLDER
<input placeholder="Enter your name" class="input">
.input::placeholder{
color: darkred;
font-family: ‘Courier New’, Courier, monospace;
}
SELECTION
AFTER
<h3>Heading</h3>
h3::after{
content:'' ;
height:
width:
margin-left:
}
1 Like
Pseudo-elements and pseudo-classes are both used in CSS to target specific elements for styling.
Pseudo-elements:
They are used to style a specific part of an element’s content
They are denoted by a double colon :: before the pseudo-element name.
Examples of pseudo-elements include ::before, ::after, ::first-line, and ::first-letter.
Pseudo-Classes:
Pseudo-classes are used to apply styles based on user interaction.
Pseudo-classes are denoted by a single colon : before the pseudo-class name.
Examples of pseudo-classes include :hover, :active, :focus, :first-child, and :nth-child.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Session6.css">
<title>Community Activity</title>
</head>
<body>
<div class="first">Heading</div>
<input type="text" placeholder="Enter the username">
<p>This is a paragraph</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
.first::selection {
background-color: #007bff;
color: #fff;
}
input::placeholder {
color: red;
}
p {
display: flex;
justify-content: space-around;
}
p::after {
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.";
font-weight: bold;
color: #007bff;
border: 1px solid red;
padding: 10px;
}
input:focus {
outline-color: #007bff;
}
li:nth-child(3) {
width: 20px;
padding: 5px;
background-color: navy;
}
1 Like
A pseudo-class is a selector that assists in the selection of something that cannot be expressed by a simple selector, for example :hover .
A pseudo-element however allows us to create items that do not normally exist in the document tree, for example ``::after`.
1 Like
PSEUDO CLASS
It is used to target single colon:
PSEUDO ELEMENT
It is used to target specific part of element:: DOUBLE COLON.
1 Like
1.pseudo-classes are used to target state. pseudo-elements are used to target specific part of element
2.p::selection{ background : red; }
p::placeholder {
color: pink;
font-size:40px;
}
p::after{
content:’ ’ ;
height: 100px ;
width:100px;
color : green;
}
3.p:focus{
border: 300px;
outline:
background-color:
}
li: nth-child {
background-color:blue;
}
1 Ans: Pseudo-elements and pseudo-classes are used to apply styles to elements based on certain conditions or positions within the document.
2 Ans: Placeholder Example
input::placeholder {
color: red;
}
<input type="text" name="firstname" placeholder="First name">
After Exmaple
<div class="box">Product</div>
.box::after {
content: " (New)";
color: green;
}
Selection Example
p::selection {
color: red;
background: yellow;
}
<p>This is a paragraph.</p>
3 Ans:
nth child Example
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
li:nth-child(odd) {
background-color: red
}
Focus Example
<input type="text" placeholder="Click here to focus">
input:focus {
border: 2px solid red;
}
/* paragrapgh selection exaple */
.para1::selection{
background-color: aqua;
}
.input_example::placeholder{
color: darkred;
}
/* suppose there are h1 and h2 in my file then */
h1::after{
content: '';
height: 15px;
width: 100%;
}
/* focus example */
.input_example_1:focus{
border: none;
outline: 10px solid red;
}
/* nth child is to call that particular element without disturbing the remaining */
table tr:nth-child(2):hover{
background-color: red;
}
/* or */
table tr:nth-child(even){
background-color: aquamarine;
}
Pseudo-classes are used to target state. Pseudo-elements are used to target specific parts of an element.
.first::selection {
background-color: black;
}
input::placeholder {
color: red;
}
heading
h1::after{ content:'' ";color:red;
}
`1. A pseudo-class is used to define a special state of an element.
A pseudo element is used to style specified parts of an element .
pseudo element start with a double colon ::. Pseudo class start with single colon' : '.
2.``
html code
<body>
<div class="div" > div section</div>
<input type =" text" placeholder=" Enter password">
<p> paragraph content</p>
<button class="button"> click here</button>
</body>
css code
.div:: selection{
background-color: pink;
color: blue;
input::placeholder{
color: red;
font-style: italic;
.element::after{
content:" content here ";
font-weight: bold;
}
button: focus{
outline : none;
background-color: red;
color: blue ;
}
tr : nth-child(even){
background-color: pink;``
}- selection: In a habitat there are red bugs and green bugs. The birds prefer the taste of the red bugs, so soon there are many green bugs and few red bugs.
Placeholder: something that marks or temporarily fills a place (often used attributively): I couldn’t find my bookmark, so I put a coaster in my book as a placeholder
The ::after selector inserts something after the content of each selected element(s).
pseudo classes are used to traget states.
pseudo elements are used to trsget specific elements.
palceholder
html code
<input placeholder="Enter your name" type="text">
css code
input::placeholder{
color: blue;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
}
after ex
html code
<h1>heading</h1>
css code
h1::after{
content: "";
height: ;
width: ;
background-image: url();
}
nth child
html code
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>45</li>
<li>5</li>
</ul>
css code
ul:nth-child(even){
color: blue;
background-color: yellowgreen;
}
ul:nth-child(odd){
color: green;
background-color: lightblue;
}
3.The syntax for selecting the first n number of elements is a bit counter-intuitive. You start with -n , plus the positive number of elements you want to select. For example, li:nth-child(-n+3) will select the first 3 li elements.
pseudo class is used to define state of an element
pseudo element is used to style the specific part of element.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem tempora iste maiores, quia esse libero quaerat. Minima voluptas et explicabo eveniet dolores hic vel modi, distinctio, odit atque tempore possimus?
hii
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
.demo2::placeholder{
color: darkred;
font-family: ‘Times New Roman’, Times, serif;
}
.para_ex1::selection{
color: crimson;
background-color: lightslategray;
}
h1::after{
content: ‘demo msg’;
color: blue;
border: 2px solid red;
margin: 20px;
padding: 10px;
}
div p:nth-child(even){
color:green
}
.demo2:focus{
outline: 2px solid pink;
background-color: pink;
}