As I continue to enhance my CSS skills, I stumbled upon a challenging puzzle that requires me to figure out how to select each individual image on a webpage using selectors. Here is the provided HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<style>
@keyframes spin{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
/*CSS Selector goes here*/{
animation-name: spin;
animation-duration:1000ms;
animation-iteration-count:infinite;
}
</style>
<body>
<header>My Tutorial 3</header>
<img src="H:\ASECOND YEAR\Web Tutorial 3\harley.jpg" />
<article>
<header>About this tutorial</header>
In this tutorial I need to make a picture spin for ever...
<img src="H:\ASECOND YEAR\Web Tutorial 3\hellcat.jpg" />
</article>
<footer>my footer
<img src="H:\ASECOND YEAR\Web Tutorial 3\smiley.jpg" /></footer>
</body>
</html>
After some trial and error, I discovered that I can target the image within the article by using article img, however, I struggled to select the other images. I attempted to use header~img in hopes of selecting the first image based on its preceding header tag, but it ended up spinning both the first and second image. Likewise, using img:nth-of-type(2) did not select the last image as I anticipated (index starting at 0).
Can someone provide guidance on the correct selectors to use in order to isolate each image individually? Selectors can indeed be quite tricky to master.
Furthermore, I managed to identify a way to target the last image by utilizing footer img, although using img:last-child unexpectedly affected the middle and last images with the spinning animation.