- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS :focus-within pseudo class
If we want to style a focused element’s parent, we use the CSS :focus-within pseudo-class.
The following examples illustrate CSS :focus-within pseudo-class.
Example
<!DOCTYPE html>
<html>
<head>
<style>
form {
margin: 2%;
padding: 2%;
display: flex;
flex-direction: column;
background: thistle;
}
input {
margin: 2%;
}
form:focus-within {
background-color: burlywood;
box-shadow: 0 0 12px rgba(0,0,0,0.6)
}
input:focus {
box-shadow: 0 0 12px rgba(0,0,0,0.6)
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="name"/>
<input type="email" placeholder="email"/>
</form>
</body>
</html>Output
This will produce the following result −
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 40%;
margin: 2%;
padding: 2%;
display: flex;
flex-direction: column;
background: lavenderblush;
}
div > * {
margin: 2%;
}
div:focus-within {
background-color: aliceblue;
box-shadow: 0 0 12px rgba(0,0,0,0.6)
}
</style>
</head>
<body>
<div>
<textarea></textarea>
<button>Click</button>
</div>
</body>
</html>Output
This will produce the following result −
Updated on: 13-Mar-2021
116 Views
Advertisements