Apply style to descendant in: onfocus CSS

Question

Apply style to descendant in: onfocus CSS

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

What I want is that when doing focus in an element li (using navigation with the tab key) the style is changed (from h2 , h3 or div ) but not me It works.

I have the following code:

li{
	background-color: #361;
	background: #FF6;
}
li > a{
	background: #FF1;
	color: #1F9;
	border: solid 4px #F36;
}
li h3 {
  color: #a11;
}
li h2 {
  color: #1a1;
}
li:focus h3{
	border: solid 5px #21F;
  color: #a11 !important;
}
li h2:focus {
	border: solid 5px #21F;
  color: #1a1 !important;
	background-color: #111;
	background: #111;
}
li div:focus {
	border: solid 5px #21F;
  color: #1a1 !important;
	background-color: #111;
	background: #111;
}

<ul>
  <li>
    <a href="/articulo-77-fracciones-e-instituciones?fc=IV.">
      <div>
        <div>
          <h2>IV</h2>
          <h3> Metas y Objetivos</h3>
          <p>Las metas y objetivos de cada área de conformidad con sus programas operativos, así como sus funciones y actividades.</p>
        </div>
      </div>
    </a>
  </li>
  <li>
    <a href="/articulo-77-fracciones-e-instituciones?fc=IV.">
      <div>
        <div>
          <h2>V</h2>
          <h3> Metas y Objetivos</h3>
          <p>Las metas y objetivos de cada área de conformidad con sus programas operativos, así como sus funciones y actividades.</p>
        </div>
      </div>
    </a>
  </li>
</ul>

but it is not working. If I apply:

 li a:focus {
    border: solid 5px #21F;
    color: #1a1 !important;
    background-color: #111;
    background: #111;
}

If it works for me, but I do not want to apply the style to the a element. I think I can not find the error.

If I put:

 li > a

instead of:

 li a

obvious I select the a element from parent to li only, but in the second form I select the a element that is descended from li no matter where is in the hierarchy right? It seems to be a very basic error but I can not find it.

css

asked by Rene Limon 06.01.2017 в 01:15

source

2 answers

1

The focus event does not work on li since these are not foouseable elements. On the other hand, if it detects the event in the a element since this is a focuseable element.

If you want your li elements to be focuseable (and you're using HTML5 ) what you can do is add the tabindex attribute to each of the li elements that you want to be focuseable.

Your modified example:

li{
	background-color: #361;
	background: #FF6;
}
li > a{
	background: #FF1;
	color: #1F9;
	border: solid 4px #F36;
}
li h3 {
  color: #a11;
}
li h2 {
  color: #1a1;
}
li:focus h3{
	border: solid 5px #21F;
  color: #a11 !important;
}
li h2:focus {
	border: solid 5px #21F;
  color: #1a1 !important;
	background-color: #111;
	background: #111;
}
li div:focus {
	border: solid 5px #21F;
  color: #1a1 !important;
	background-color: #111;
	background: #111;
}

<ul>
  <li tabindex="1">
    <a href="/articulo-77-fracciones-e-instituciones?fc=IV.">
      <div>
        <div>
          <h2>IV</h2>
          <h3> Metas y Objetivos</h3>
          <p>Las metas y objetivos de cada área de conformidad con sus programas operativos, así como sus funciones y actividades.</p>
        </div>
      </div>
    </a>
  </li>
  <li tabindex="1">
    <a href="/articulo-77-fracciones-e-instituciones?fc=IV.">
      <div>
        <div>
          <h2>V</h2>
          <h3> Metas y Objetivos</h3>
          <p>Las metas y objetivos de cada área de conformidad con sus programas operativos, así como sus funciones y actividades.</p>
        </div>
      </div>
    </a>
  </li>
</ul>

answered by 06.01.2017 в 01:29

Create a shortcut that executes a file in Node.js checkbox in angularjs

score 0 · Accepted Answer

I have finally found the answer:

Indeed, as error404 says, the focus event does not work on all html elements:

The: focus selector is allowed on elements that accepts keyboard events or other user inputs. reference w3schools

Therefore the event accepts elements such as:

inputs
buttons
links

To force the focus you can use two ways:

<!-- "tabindex" -->
<div tabindex="0" id="1"></div>
<!-- y en nuevas implementaciones de html5 "contenteditable" -->
<div id="2" contenteditable="true"></div>

Good. Now, what I was trying to do was to focus on the li change the style of h2 , h3 or div . That was the main error, the correct thing was when the <a> was applied to apply the style.

Based on that, the following code works:

li{
    background-color: #361;
    background: #FF6;
}
li > a{
    background: #FF1;
    color: #1F9;
    border: solid 4px #F36;
}
li h3 {
    color: #a11;
}
li h2 {
    color: #1a1;
}
a:focus > div{
    border: solid 5px #21F;
    color: #1a1 !important;
    background-color: #111;
}

<ul>
  <li>
    <a href="/articulo-77-fracciones-e-instituciones?fc=IV.">
      <div>
        <div><!--  tabindex="0" contenteditable="true" -->
          <h2>IV</h2>
          <h3> Metas y Objetivos</h3>
          <p>Las metas y objetivos de cada área de conformidad con sus programas operativos, así como sus funciones y actividades.</p>
        </div>
      </div>
    </a>
  </li>
  <li>
    <a href="/articulo-77-fracciones-e-instituciones?fc=IV.">
      <div>
        <div><!--  tabindex="0" contenteditable="true" -->
          <h2>V</h2>
          <h3> Metas y Objetivos</h3>
          <p>Las metas y objetivos de cada área de conformidad con sus programas operativos, así como sus funciones y actividades.</p>
        </div>
      </div>
    </a>
  </li>
</ul>