New course! Every coder should learn Generative AI!
Try a free lesson+ 1
Why did they used .card>img
<!DOCTYPE html> <html> <head> <title> Try It Yourself </title> <style type="text/css"> .card { box-shadow: 0 15px 30px rgba(0,0,0,0.30), 0 11px 8px rgba(0,0,0,0.22); width: 250px; box-sizing: border-box; transition-duration: 1s; } .card > img { display: block; max-width: 100%; height: auto; margin: 0px; } .card > p { font-family: sans-serif; padding: 0px 10px 10px 10px; text-align: center; } .card:hover { box-shadow: 0 18px 36px rgba(0,0,0,0.30), 0 14px 11px rgba(0,0,0,0.22); width: 270px; } </style> </head> <body> <div class="card"> <img src="images/woman.jpg" /> <p> Description of the image goes here. Try clicking and holding me to see the hover effect. </p> </div> </body> </html>
3 Answers
+ 3
.card > img means "img tag that is child of an element with .card class"
+ 1
Thanks
0
parent > direct child
https://www.w3.org/wiki/CSS3/Selectors
Referer to the lesson named Selectors of jQuery
https://www.sololearn.com/learning/1082/2790/6013/1
https://api.sololearn.com/DownloadFile?id=3119