zaydek zaydek - 4 months ago 21
CSS Question

CSS selector for neighbor

Here's what I'm working on,

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>David Paint</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { background: linear-gradient(to right, #00e5ff, #00e676); margin: auto; max-width: 736px; font-size: 0px }
#icons img { width: 36px }
</style>
</head>
<body>

<span id="icons">
<a href="david">
<img title="David" src="david.svg">
</a>
<a href="paint">
<img title="Paint" src="paint.svg">
</a>
</span>

</body>
</html>


How can I use CSS selectors to target
<img title="Paint" src="paint.svg">
without adding more classes or IDs? The problem arose when I wrapped the
img
tags in
a
tags. Before that, I could target the last
img
tags no problem.

Thanks!

Answer

You can use each of the following ways

  1. #icons img[title = 'paint'] { ... }
  2. #icons img[src = 'paint.svg']{ ... }
  3. #icons a:last-child img { ... }
  4. #icons a:nth-child(2) img { ... }