css Question posted in
Some basic documentation can be found here.

take an element if has a particular id css

I need to change the width of an element only when a child has the id="detail" so in my css I do this:

.ui-dialog:has(#detail){
    width: 51em !important;
    
}

But It is not work. Anyone can help me?

Tags:

2

Answers


  1. 0

    If you want to use JS, here’s what you need to do to change the width of an element if its child has id="detail":

    const parentEl = document.querySelector(".ui-dialog")
const childEl = parentEl.querySelector("#detail")

if(childEl) parentEl.style.width = '51em'
    Login or Signup to reply.
  2. 0 
    // I created a li element after three seconds so you can understand better
setTimeout(() => {
var newListItem = document.createElement("li");
newListItem.id = "detail";
newListItem.textContent = "Three";

var existingList = document.querySelector(".ui-dialog");

existingList.appendChild(newListItem);
}, 3000)
    .ui-dialog{
    width: 100px;
    background: red;
}
.ui-dialog:has(#detail){
    width: 51em;
    background: green;
}
    <ul class="ui-dialog">
<li class='child'>one</li>
<li class='child'>two</li>
</ul>

    In this example if there is no child with id detail the color is red but when the child is created and added to our existing List then it uses :has() css

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search