Lecture Notes Of Class 22: Pseudo-classes
Objective:
In this class, you will learn how
to use CSS pseudo-classes to style elements based on their state or
position in a document. Pseudo-classes allow you to apply styles to elements in
ways that can't be achieved with simple selectors.
Topics
Covered:
1. :hover
Pseudo-class
2. :focus
Pseudo-class
3. :nth-child()
Pseudo-class
1. :hover
Pseudo-class
What is
it?
The :hover pseudo-class is used
to apply styles when the user hovers over an element with their mouse pointer.
This is commonly used to create interactive effects, such as changing button
colors or highlighting links when the user hovers over them.
Example:
css
CopyEdit
button:hover
{
background-color: lightblue;
cursor: pointer;
}
In this example, when the user
hovers over a button, its background color changes to lightblue and the cursor
changes to a pointer, indicating that it's clickable.
Use
Cases:
- Links:
Change color when hovered to show interactivity.
- Buttons:
Apply a subtle animation or color change when hovered to enhance user
experience.
- Images:
You can apply a scale or opacity effect to images when they are hovered.
2. :focus
Pseudo-class
What is
it?
The :focus pseudo-class applies
styles when an element gains focus, such as when a user clicks on an input
field or uses the keyboard to navigate to an element (e.g., using the Tab key).
This pseudo-class is commonly
used in forms and input fields to highlight the currently selected or active
element.
Example:
css
CopyEdit
input:focus
{
border: 2px solid blue;
background-color: lightyellow;
}
In this example, when the user
clicks on an input field, the border becomes blue and the background color
changes to lightyellow, making it clear that the field is selected.
Use
Cases:
- Input
Fields: Highlight input fields when they gain focus
to improve accessibility.
- Forms:
Provide visual feedback when a user navigates through different form
fields.
- Buttons:
Indicate the active state of buttons during keyboard navigation.
3. :nth-child()
Pseudo-class
What is
it?
The :nth-child() pseudo-class
allows you to select elements based on their position in a parent element. This
is useful for applying styles to elements at specific positions or creating
alternating row colors in tables, for example.
It accepts a parameter that can
be a number, keyword, or formula.
Syntax:
css
CopyEdit
selector:nth-child(n)
{
style-properties;
}
- n
can be:
- A
number: Select the nth child of a parent.
- Even or
odd: Select even or odd children.
- A
formula: Select every nth element, such as 2n (every
second element), or 2n+1 (every odd element).
Examples:
- Selecting
every second child:
css
CopyEdit
li:nth-child(2n)
{
background-color: lightgray;
}
This will apply a lightgray
background to every even li element.
- Selecting
the first child:
css
CopyEdit
ul li:nth-child(1)
{
font-weight: bold;
}
This will make the first li
element bold.
- Selecting
odd children:
css
CopyEdit
li:nth-child(odd)
{
color: red;
}
This will apply the color red to
all odd li elements.
Lab
Exercise: Styling Form Elements with Hover and Focus Effects
Objective:
You will practice applying the :hover
and :focus pseudo-classes to style form elements such as input fields and
buttons.
Instructions:
1. Create a
simple form:
o
Include input fields for the user's name and email.
o
Include a submit button.
2. Apply :hover
and :focus effects:
o
Change the background color of the button when
hovered.
o
Apply a border color change when the input fields
are focused.
Example
Code:
html
CopyEdit
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Form Styling</title>
<style>
body {
font-family: Arial, sans-serif;
}
input, button {
padding: 10px;
margin: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
input:focus {
border-color: blue;
background-color: #e6f7ff;
}
button:hover {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
button {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>Contact Form</h2>
<form action="#">
<label for="name">Name:</label>
<input type="text" id="name"
name="name" placeholder="Your Name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email"
name="email" placeholder="Your Email" required>
<br>
<button type="submit">Submit</button>
</form>
</body>
</html>
Explanation:
1. :focus on
Input Fields: When the input fields are focused, their border
color turns blue, and the background color becomes light blue (#e6f7ff).
2. :hover on
Button: When the user hovers over the submit button, its background changes to
#4CAF50, and the text color becomes white.
Recap:
- :hover:
Used to apply styles when an element is hovered by the mouse.
- :focus:
Used to apply styles when an element gains focus, such as input fields.
- :nth-child():
Selects elements based on their position in a parent element, useful for
things like alternating row colors or targeting specific elements.
Homework
Assignment:
1. Create a
webpage with a table. Use the :nth-child() pseudo-class to style alternate rows
with different background colors.
2. Create a
form with
multiple input fields and a submit button. Apply :focus to change the style of
input fields and :hover to the button.
No comments:
Post a Comment