Así que básicamente tengo:
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; } Para ser precisos, necesito cambiar el color del borde de div1 a negro si as-text-box está enfocado.
También lo probé con JQuery pero aún no tuve suerte.
JQuery:
$(function(){ if ($(".as-text-box").is(":focus")) { alert("Has Focus"); } else { alert("Doesn't Have Focus"); } });Jsfiddle: https://jsfiddle.net/2xn5rj2y/
Todas las confianzas son muy apreciadas.
No puede navegar a un elemento principal en un selector css. Necesitarás Javascript para eso.
Si desea que el elemento principal cambie de borde cuando el elemento secundario esté enfocado, adjunte un oyente a los eventos de blur y focus del div editable.
$(".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>Tu seleccionador:
[contentEditable=true]:focus .div1 está tratando de seleccionar un elemento con clase div1 que es descendiente de un elemento contentEditable que está enfocado. Esto es claramente al revés ya que el div .div1 es el padre del div contentEditable .
Simplemente eliminando la parte .div1 del selector hace que funcione:
.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> También funcionaría invertir el orden si tiene otras razones para necesitar seleccionar en div1 , pero creo que la solución anterior es la más simple en ausencia de otros requisitos.
Creo que está buscando personalizar el atributo CSS del esquema.
CSS
outline:none;https://jsfiddle.net/2xn5rj2y/5/
Si está intentando apuntar al padre para que tenga un borde, entonces jquery .parent().css("border","1px solid #000"); trabajaría.