So Basically I have:

HTML:

<div class="div1">
  <div class="as-text-box" contenteditable="true"></div>
</div>

CSS:

.div1{
  position:absolute;
  height:50px;
  width:200px;
  background:white;
  border:1px solid #ccc;
}
.as-text-box{
  position:absolute;
  height:30px;
  width:90%;
  background:#ddd;
  top:10px;
  left:5%;
}
[contentEditable=true]:focus .div1{
    border:1px solid black;
}

To be precise I need to change the border color of div1 to black if as-text-box is focused.

I also tried it with JQuery but still no luck.

JQuery:

$(function(){
    if ($(".as-text-box").is(":focus")) {
        alert("Has Focus");
    } else {
        alert("Doesn't Have Focus");
    }
});

Jsfiddle: /

All relies are much appreciated.

So Basically I have:

HTML:

<div class="div1">
  <div class="as-text-box" contenteditable="true"></div>
</div>

CSS:

.div1{
  position:absolute;
  height:50px;
  width:200px;
  background:white;
  border:1px solid #ccc;
}
.as-text-box{
  position:absolute;
  height:30px;
  width:90%;
  background:#ddd;
  top:10px;
  left:5%;
}
[contentEditable=true]:focus .div1{
    border:1px solid black;
}

To be precise I need to change the border color of div1 to black if as-text-box is focused.

I also tried it with JQuery but still no luck.

JQuery:

$(function(){
    if ($(".as-text-box").is(":focus")) {
        alert("Has Focus");
    } else {
        alert("Doesn't Have Focus");
    }
});

Jsfiddle: https://jsfiddle/2xn5rj2y/

All relies are much appreciated.

• javascript
• jquery
• html
• css

• You can't navigate up in css selectors – LcSalazar Commented Mar 20, 2017 at 18:03
• @LcSalazar What else choice do I have? – WjNa Commented Mar 20, 2017 at 18:06
• I've posted a JS solution – LcSalazar Commented Mar 20, 2017 at 18:07

5 Answers 5

You can't navigate to a parent element on a css selector. You'll need Javascript for that.

If you want the parent element to change border when the child one is focused, attach a listener to the blur and focus events of the editable div.

$(".as-text-box").on("focus", function() {
    $(".div1").addClass("focusClass");
});

$(".as-text-box").on("blur", function() {
    $(".div1").removeClass("focusClass");
});

.div1{
  position:absolute;
  height:50px;
  width:200px;
  background:white;
  border:1px solid #ccc;
}
.as-text-box{
  position:absolute;
  height:30px;
  width:90%;
  background:#ddd;
  top:10px;
  left:5%;
}

.div1.focusClass {
    border: 1px solid black;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div1">
  <div class="as-text-box" contenteditable="true"></div>
</div>

Your selector:

[contentEditable=true]:focus .div1

is trying to select an element with class div1 which is a descendant of a contentEditable element which is focused. This is clearly backwards as the .div1 div is the parent of the contentEditable div.

Simply removing the .div1 part of the selector makes it work:

.div1{
  position:absolute;
  height:50px;
  width:200px;
  background:white;
  border:1px solid #ccc;
}
.as-text-box{
  position:absolute;
  height:30px;
  width:90%;
  background:#ddd;
  top:10px;
  left:5%;
}
[contentEditable=true]:focus{
	border:1px solid black;
  outline:none;
}

<div class="div1">
  <div class="as-text-box" contenteditable="true">
  
  </div>
</div>

It would also work to reverse the order if you have other reasons for needing to select on div1, but I feel the above solution is the simplest absent other requirements.

I believe you are looking to customize the outline css attribute.

CSS

outline:none;

https://jsfiddle/2xn5rj2y/5/

If you are trying to target the parent to have a border, then jquery .parent().css("border","1px solid #000"); would work.

There's no way to do it through css (to select parent), you can do it via jQuery with events focusin and focusout where you can do with parent element what you want.

$('.as-text-box').on('focusin', function(){
  /** on focus, set border to a parent **/
  $(this).parent().css({'border':'1px solid black'});
}).on('focusout', function(){
  /** on lost focus, remove border **/
  $(this).parent().css({'border':''}); 
});

.div1{
  position:absolute;
  height:50px;
  width:200px;
  background:white;
  border:1px solid #ccc;
}
.as-text-box{
  position:absolute;
  height:30px;
  width:90%;
  background:#ddd;
  top:10px;
  left:5%;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
  <div class="as-text-box" contenteditable="true">
  </div>
</div>

Short & simple. When it has focus border turns black, if it loses focus it goes back to #ccc.

$('.as-text-box').on('focus', function() {
$('.div1').css("borderColor", "black");
$(this).on('focusout', function() {
    $('.div1').css("borderColor", "#ccc");
});

});

JSfiddle