在获得焦点时为 parent 元素应用样式

Question

 **CSS**

    #child:focus > #parent {
    color: white;
    } 

    **HTML**
    <div id="parent">
        <div id="child">
        </div>
    </div>

当 child 聚焦时，这是为 parent 应用样式的正确方法吗？

编辑：我的问题是我需要为小型设备应用这些样式。所以我不能使用Jquery。这就是为什么我在 css.

的媒体查询中尝试

Answer 1

您也可以使用 jQuery：

$('#child:focus').parent().addClass('your_class');

Answer 2

您可以使用 JQuery:

非常简单地完成此操作

$(document).ready(function(){
if ($(window).width() < 960) {
    $('.child input').on('focus', function(){
    $('.parent').css({
    'background-color': 'blue'
    });
 });
   $('.child input').on('blur', function(){
    $('.parent').css({
    'background-color': 'lightgrey'
    });
 }); 
}
 
});

.parent {
 width: 300px;
 height: 300px;
 display: block;
 background: lightgrey;
}
input {
  width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="parent">
  <div class="child"><input type="text"></div>
</div>

Answer 3

首先，您需要为您的 div 添加一个 tabindex 属性，否则它们永远无法获得焦点。

我还包含了当子项失去焦点时从父项中删除 CSS class 的代码。

$("#child").focusin(function() {
  $(this).parent().addClass("focused");
});
$("#child").blur(function() {
  $(this).parent().removeClass("focused");
});

.focused {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="parent" tabindex="-1">
  Parent Top
  <div id="child" tabindex="-1">
    Child
  </div>
  Parent Bottom
</div>

Answer 4

这可以通过 4th Level selecor pseudo-class that works the same as the jQuery implementation 实现。

#parent:has(> #child) { /* styles to apply to the #parent */ }

但这是 not currently supported by browsers。

why we don't have a parent selector

Answer 5

CSS 没有 select 或 select 更高级别...您需要使用 JS

解决您的问题

Answer 6

对于这个特殊需求，:focus-within 伪类在 CSS 中实现。在您的示例中，CSS 将执行您尝试完成的操作。我将 tabindex 添加到 #child 以使 div 可聚焦。对于本机可聚焦的元素（例如链接或表单元素），没有必要。但是，IE 和 Edge 不支持它。计划 switch to Blink rendering engine 后 Edge 将支持它。

另请参阅此 CSS Tricks article。

#parent {
  padding: 0.25em;
   background-color: crimson;
}

#parent:focus-within {
  color: white;
}

  <div id="parent">
      <h1>Parent</h1>
      <div id="child" tabindex="0">
        <p>Child (click me!)</p>
      </div>
  </div>

在获得焦点时为 parent 元素应用样式

Apply style for parent element when it is focused

html

css

styles