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.net/2xn5rj2y/
All relies are much appreciated.
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.com/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.net/2xn5rj2y/5/
If you are trying to target the parent to have a border, then jquery .parent().css("border","1px solid #000"); would work.