how to access

Question

how to access img tag inside a href tag to set focus to <img> tag?

eg:

<a href ='#' ><img class="img1" src="abc.png"/> </a>

The a .img1:focus {} didn't work. Not able to access <img> inside an <a href></a> tag

If I add class to tag, I can add focus to tag but tag & tag are of diff size & causing issue. eg: , then a .test:focus{} is working, But I need focus for tag

Probably related: https://stackoverflow.com/q/27327765/1531971 — , Apr 30 '18 at 15:38

Aurelien · Answer 1 · 2018-04-30T17:08:24.623

1

You need a space between a and .img1 ( the way you wrote it means "a tag with img1 class" ) this way :

a .img1:focus {}

This means "element with img1 class inside a tag"

EDIT : in the link @jdv provided in the comments of your initial answer, don't focus (pun unintended) on the accepted answer, but on the second one. You can fix your problem by adding a tabindex property to your img tag. Like this :

<a href ='#' ><img class="img1" src="abc.png" tabindex="0"/> </a>

edited Apr 30 '18 at 17:08

answered Apr 30 '18 at 15:36

Aurelien

1,497
7
15

What bugs me is the "to set focus to" in your question. What are you trying to achieve exactly ? Css won't "set" any status. – Aurelien Apr 30 '18 at 16:46
I have an tag inside tag. I am trying to get focus(highlight img border with yellow color) when tabbing through , the css a .img1:focus {} is not working But If I add class name to < a > tag focus achieved, but & are of two sizes, the img is shown in bigger size & , then a .test:focus is working, but I need focus – Maria Apr 30 '18 at 16:50
Thank you, but it already have focus & tabindex works fine(the page having serial tabindex). My aim is to add highlight img border with yellow color when tabbed &focused – Maria Apr 30 '18 at 18:15
Well once the css definition works, just add border:4px solid yellow; in it, for example. – Aurelien Apr 30 '18 at 18:20

score 0 · Answer 2 · answered Apr 30 '18 at 15:38

0

try out this code

<a href ='#' id='link'><img class="img1" src="abc.png"/> </a>

a#link .img1:focus{}

answered Apr 30 '18 at 15:38

Bagzie

482
5
7

score 0 · Answer 3 · answered Apr 30 '18 at 15:52

0

focus is often associated with form elements like input field I advise you use hover like this instead

a img:hover{
  width: 500px;
}

<a><img class="img1" src="http://via.placeholder.com/350x150"/></a>

answered Apr 30 '18 at 15:52

Friday Ameh

1,664
1
10
15

How about other browsers?? – Friday Ameh Apr 30 '18 at 16:43
If I add class to tag, I can add focus to tag but tag & tag are of diff size & causing issue. eg: , then a .test:focus{} is working, But I need focus for tag – Maria Apr 30 '18 at 16:44

how to access

3 Answers3