zaydek zaydek - 1 year ago 113
CSS Question

CSS selector for neighbor

Here's what I'm working on,

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

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


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
tags in
tags. Before that, I could target the last
tags no problem.


Answer Source

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 { ... }