61485


フォーカスのデフォルトを設定するにはどうすればいいですか？  
first-childを試しましたがこれだと他をフォーカスしても最初のフォーカスが残っていまいます  
これをフォーカスするたびにフォーカスが変わるようにしたいです

[code]

    ul {
      vertical-align: middle;
      text-align: center;
      font-size: 0;
    }
    
    li {
      background-color: #111000;
      display: inline-block;
      width: 150px;vertical-align: middle;
      height: 100px;
      color: #f2f2f2;
      font-size: 16px;
      line-height: 100px;
    }
    
    li:focus {
      background-color: #bb2a3f;
      font: 25px bold;
      line-height: 100px;
      vertical-align: middle;  
    }
    
    i {
    color: gold;
    }
    
    li:first-child {
          background-color: #bb2a3f;
      font: 25px bold;
      line-height: 100px;
      vertical-align: middle;  
    }
[/code]

[code]

    <ul>
      <li tabindex=-1><i class="fas fa-crown"></i>新着</li>
      <li tabindex=-1><i class="fas fa-crown"></i>月間</li>
      <li tabindex=-1><i class="fas fa-crown"></i>週間</li>
      <li tabindex=-1><i class="fas fa-crown"></i>総合</li>
    </ul>
[/code]


CC BY-SA 4.0
2019-12-16T06:12:19.817
61473
2019-12-16T12:03:31.790
37046
question
html css
フォーカスのデフォルトを設定するには


HTML5にはautoforcus属性がありますがこれはinputタグのみ利用できます。  
<http://www.htmq.com/html5/input_autofocus.shtml>  
残念ながらul liタグでは利用できません。

CSSに書いてもあくまで最初の属性のCSSをそれに固定するという形になるため  
それも意味はないでしょう。  
HTMLとCSSのみだけでは多少煩雑なので、かんたんに実行できる方法としてJavascriptのfocusメソッドを利用をおすすめします。  
<https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/focus>

[code]

    document.getElementById('hoge').children[0].focus()
[/code]

[code]

    ul {
      vertical-align: middle;
      text-align: center;
      font-size: 0;
    }
    
    li {
      background-color: #111000;
      display: inline-block;
      width: 150px;vertical-align: middle;
      height: 100px;
      color: #f2f2f2;
      font-size: 16px;
      line-height: 100px;
    }
    
    li:focus {
      background-color: #bb2a3f;
      font: 25px bold;
      line-height: 100px;
      vertical-align: middle;  
    }
    
    i {
    color: gold;
    }
[/code]

[code]

    <ul id="hoge">
      <li tabindex=-1><i class="fas fa-crown"></i>新着</li>
      <li tabindex=-1><i class="fas fa-crown"></i>月間</li>
      <li tabindex=-1><i class="fas fa-crown"></i>週間</li>
      <li tabindex=-1><i class="fas fa-crown"></i>総合</li>
    </ul>
[/code]

[code]

    document.getElementById('hoge').children[0]
    
[/code]

この書き方はHTMLの中の「hoge」というIDの子供の最初のHTMLElementを取得するというものですが、  
詳しくはJavascriptの使い方を学んで見てください。


CC BY-SA 4.0
2019-12-16T07:57:34.717
61475
2019-12-16T07:57:34.717
22665
61473
answer


`:focus-within` 擬似クラスを使うことで、フォーカスを持っていない場合の装飾を行うことが出来ます。

[code]

    ul {
      vertical-align: middle;
      text-align: center;
      font-size: 0;
    }
    
    li {
      background-color: #111000;
      display: inline-block;
      width: 150px;
      vertical-align: middle;
      height: 100px;
      color: #f2f2f2;
      font-size: 16px;
      line-height: 100px;
    }
    
    ul:not(:focus-within)>li:first-of-type,
    li:focus {
      background-color: #bb2a3f;
      font: 25px bold;
      line-height: 100px;
      vertical-align: middle;
    }
    
    i {
      color: gold;
    }
[/code]

[code]

    <ul>
      <li tabindex=-1><i class="fas fa-crown"></i>新着</li>
      <li tabindex=-1><i class="fas fa-crown"></i>月間</li>
      <li tabindex=-1><i class="fas fa-crown"></i>週間</li>
      <li tabindex=-1><i class="fas fa-crown"></i>総合</li>
    </ul>
[/code]

もしフォーカスを失う直前の要素に装飾を適用し続けたい場合は、 JavaScript を使う必要があります。

[code]

    const ul = document.querySelector("ul");
    
    document.addEventListener("DOMContentLoaded", () => {
      ul.firstElementChild.classList.add("focused");
    });
    
    ul.addEventListener("focusin", ({target}) => {
      [...target.parentElement.children].map(el => el.classList.toggle("focused", el == target));
    });
[/code]

[code]

    ul {
      vertical-align: middle;
      text-align: center;
      font-size: 0;
    }
    
    li {
      background-color: #111000;
      display: inline-block;
      width: 150px;
      vertical-align: middle;
      height: 100px;
      color: #f2f2f2;
      font-size: 16px;
      line-height: 100px;
    }
    
    .focused {
      background-color: #bb2a3f;
      font: 25px bold;
      line-height: 100px;
      vertical-align: middle;
    }
    
    i {
      color: gold;
    }
[/code]

[code]

    <ul>
      <li tabindex=-1><i class="fas fa-crown"></i>新着</li>
      <li tabindex=-1><i class="fas fa-crown"></i>月間</li>
      <li tabindex=-1><i class="fas fa-crown"></i>週間</li>
      <li tabindex=-1><i class="fas fa-crown"></i>総合</li>
    </ul>
[/code]


CC BY-SA 4.0
2019-12-16T11:41:52.077
61485
2019-12-16T12:03:31.790
2019-12-16T12:03:31.790
32986
32986
61473
answer