Селекторы атрибутов CSS: Как я могу стилизовать родительский элемент, но использовать атрибут дочернего элемента? - PullRequest
Новая
       16

Селекторы атрибутов CSS: Как я могу стилизовать родительский элемент, но использовать атрибут дочернего элемента?

0 голосов
/ 10 мая 2019

По сути, у меня есть iframe, содержащий значение атрибута src, которое я хочу выбрать.Мой запрос селектора и примененный стиль выглядят так: 

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

Однако я хотел бы только стилизовать свойство width родительского класса .modal-dialog, а не ширину iframe.

AnyИдея как этого добиться?

Спасибо!

1 Ответ

1 голос
/ 13 мая 2019

Нет, у CSS еще нет родительских селекторов.

В CSS

Селектор CSS4 :has решит вашу проблему, но в настоящее время он не поддерживается.

MDN CSS документация для: имеет

В 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="/8945417/selektory-atributov-css-kak-ya-mogu-stilizovat-roditelskii-element-no-ispolzovat-atribut-dochernego-elementa" width="300" heigth="200">
                      <p>Your browser does not support iframes.</p>
                  </iframe>
              </div>
          </div>
      </div>
  </div>

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

MDN JS документация для document.querySelector

...