CSS attribute selectors: How can I style parent element but use attribute of child element?

Question

Basically, I have an iframe containing the src-attribute value I want to select on. My selector query and applied style looks like this:

    .news-frame .news-modal.bt-custom-forms .modal-dialog iframe[src^="/sites/testSite/"] {
        width: 1286px !important;
    }

However, I only would like to style the parent .modal-dialog class' width property and not the iframe's width.

Any idea how to achieve this?

Thanks!

Answer 1

No, CSS does not have parent selectors yet.

In CSS

The CSS4 selector :has will solve your problem but it's not currently supported.

MDN CSS documentation for :has

In JavaScript

/* select the result div */
let resultDiv = document.getElementById("result");

/* 
 * select the first modal with these classes :
 * querySelector select only the first
 * See querySelectorAll to select all results
 */
let modal = document.querySelector(
  ".news-frame .news-modal .bt-custom-forms .modal-dialog"
);

/* check for the iframe child attribute value */
let iframeElement = document.querySelector(
  '.news-frame .news-modal .bt-custom-forms .modal-dialog iframe[src^="https://"]'
);

/* querySelector return null if no result */
if (
  null !== iframeElement 
  && null !== modal
) {
  modal.style.width = "width: 1286px !important;";
  resultDiv.innerHTML += " Good website";
} else {
  resultDiv.innerHTML += " Wrong website";
}

<div id="test">
  <div class="news-frame">
      <div class="news-modal">
          <div class="bt-custom-forms">
              <div class="modal-dialog">
                  <iframe src="https://stackoverflow.com/questions/56073820/css-attribute-selectors-how-can-i-style-parent-element-but-use-attribute-of-chi#" width="300" heigth="200">
                      <p>Your browser does not support iframes.</p>
                  </iframe>
              </div>
          </div>
      </div>
  </div>

  <div id="result"></div>
</div>

MDN JS documentation for document.querySelector