CSS :Focus Not Working

CSS :focus not working

If you want a real focus state to a div element, you can add a tabindex attribute to it.

.row {

 display:inline-block;

  border:1px solid grey;  

  height:200px;

  width: 200px;

  line-height:1em;

  background: grey;

  margin: 5px;

   opacity: 0.1;

}

.row:active, .row:focus { background: orange; }

<div id="main" class="container">

<div class="row" tabindex="1" id="row0">

</div>

</div>

CSS how to make div visible on focus not working

only a tag ll be focousable so use below code it'll work...i have updated the jsfiddle

.nav > ul.navtabs > li > a:focus .delete{
  border: 1px solid red;
  display: inline;
}

focus not working for input and !important does not do anything

You need to remove default outline style first

input:focus {
  outline: none;
  border: 1px solid #dd3333;
}

Why CSS animation isn't working when i use focus code?

There is nothing wrong with your css. Its just, you can't focus a div normally by pressing Tab key. To tell the browser that the div can be focused, you need to add a tabindex of 0.

Note: Here to make it focusable, I have added a 0. But it can be a positive value also. Non-negative tabindex denotes the order in which the elements should be focused. Negative tabindex is focusable through JS. More on tabindex in mdn

*{
 box-sizing: border-box;
 background-color: teal;
}
        html{
            font-size: 2rem;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
        }
 
        .btn{
            background-color: rgb(0, 204, 255);
            color: rgb(247, 247, 247);
           border: none;
           outline: none;
           font-size: 1rem;
           border-radius: 5em;
           padding-left:.5em;
           padding-right: .5em;
           padding-top:.5em;
           padding-bottom: .5em;
           cursor: pointer;           
        }

        .btn:focus {
            animation: kac_git 500ms ease-in-out;
        }
        
        @keyframes kac_git {
            33%{  
              transform: translate(100px,50px) rotate(30deg) scale(.9);
            }
            66%{
                transform: translate(0px,25px) rotate(90deg) scale(.75);
            }
            100%{
                transform: translate(-100px,-75px) rotate(200deg) scale(0);
            }
        }

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="btn" tabindex="0">üzerime gel</div>
</body>
</html>

CSS focus-within and hover are not working

:focus-within and :hover or other state not worked for previous sibling selector. Instead you can use root element to check in focus-within the .container in your case. That way you can change style of all child element of the root element, .container in your case.

.container {
   margin: 0 0;
   padding: 0 20px 0 20px;
   padding-top: 5vh;
   overflow: auto;
 }

 .up_buttons {
   display: grid;
   grid-template-columns: repeat(auto-fit, 200px);
   justify-content: center;
   padding: 10px;
   grid-gap: 20px;
   visibility: hidden;
 }

 .dwn_buttons {
   display: grid;
   grid-template-columns: repeat(auto-fit, 200px);
   justify-content: center;
   padding: 20px;
   grid-gap: 20px;
   visibility: hidden;
 }
 .container:focus-within .dwn_buttons,
 .container:focus-within .up_buttons{ 
   visibility: visible;
 } 
 .container:hover .dwn_buttons,
 .container:hover .up_buttons{ 
   visibility: visible;
 }

<div class="container">

    <div class="up_buttons">
      <div class="tp_btn">
        <input type="button" id="btn5" value=" food " />
      </div>
      <div class="tp_btn">
        <input type="button" id="btn6" value=" wtf do I know " />
      </div>
      <div class="tp_btn">
        <input type="button" id="btn7" value=" just an idea " />
      </div>
    </div>

    <div class="dwn_buttons">
      <div class="tp_btn">
        <input type="button" id="btn8" value=" social media content " />
      </div>
      <div class="tp_btn">
        <input type="button" id="btn9" value=" branding " />
      </div>
    </div>

    <div class="sbar" id="bar">
      <input type="text" placeholder=" What's in your head?">
    </div>
  </div>

CSS :Focus Not Working