When a user visits my website using a touch device or without Javascript support, I want the first of two images to display. To achieve this, I am targeting them using Modernizr.
The menu button at the top of the page:
<img src="menubutton.png" alt="Menubutton">
The second image is simply used in an article:
<img src="image.jpg" alt="Image">
In my CSS file, I have added this code snippet:
.no-touch img:first-of-type, .no-js img:first-of-type {
display:none;
}
Currently, the first image is hidden on my laptop but visible on my iPad. However, the second image is not displayed on my laptop but appears on my iPad. Interestingly, if I target the first image using an ID, it works correctly - but I prefer not to use IDs unless absolutely necessary. Can you help me understand what's happening here?