CSS: выберите элемент, только если существует более поздний брат

В моей структуре HTML я настроил ее так:

<body>
   <main>
      <section>
      ...
      </section>

      <aside>
      ...
      </aside>
   </main>
</body>

Проблема заключается не в всех страницах <aside>

Мне нужно выбрать <section> и дать ему max-width: 500px; ТОЛЬКО, когда <aside> присутствует. По умолчанию используется section { max-width: 1000px; } (если <aside> отсутствует)

В отличие от Селектора для одного тега, за которым следует другой тег; пользователь [задающий вопрос] хочет стилизовать "B" ВСЕ ВРЕМЯ. Кроме того, в этом вопросе пользователь хочет выбрать "B" (не "A" )

  • Мне нужно стирать <section> ТОЛЬКО, если присутствует <aside>.
  • Я не могу изменить порядок HTML > _ <
  • Можно ли это сделать только с помощью CSS?
  • Какой селектор мне нужен или как его настроить?
  • Если это невозможно сделать с CSS (я скорее это только CSS), как я могу это сделать?

Ответы

Ответ 1

Утонченный маленький трюк

Вы можете добиться того, чего хотите, используя трюк, чтобы проверить , если элемент <section> является единственным элементом в <main>. Это не сработает, если есть какие-либо другие элементы. В вашем случае это должно работать следующим образом (http://jsfiddle.net/Ljm323qb/2/):

section {
     max-width: 500px;
}
/* The STAR of the show */
section:only-child {
     max-width: 1000px;
}

Как показано в этом кодеде: http://codepen.io/omarjuvera/pen/ByXGyK?editors=110

Общие сведения о селекторах для сиблинга

Вот селектор +, который выберет брата, который появится сразу после элемента (https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors)

И есть селектор ~, который выбирает всех следующих братьев и сестер (https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors)

Вы можете достичь этого, поместив элемент <aside> перед элементом <section> и используя селектор sibling.

Вот пример: http://jsfiddle.net/Ljm323qb/1/

Быстрый взгляд в будущее
Вскоре это будет возможно, с новым псевдо-классом :has (http://dev.w3.org/csswg/selectors-4/#relational)
Вы можете назвать что-то вроде main:has(> aside) > section { ... }, но нам придется ждать этого, к сожалению: (

Ответ 2

Вы можете переключить класс .haveSidebar на тег body с помощью jQuery и сделать свой CSS для тега section зависимым от того, будет ли этот класс существует в теге body или нет:

HTML

<main>
    <section>
    </section>

    <aside>
    </aside>
</main>

CSS

main {
    width:100%;
}
main aside {
    width:300px;
    background:red;
    min-height:300px;
    float:left;
}
main section {
    width:100%;
    background:green;
    min-height:300px;
    float:left;
}
body.haveSidebar main section {
    width: calc(100% - 300px);
}

JS

var sideBar = $('body > main > aside');
if (sideBar.length > 0) {
    $('body').addClass('haveSidebar');
} else {
    $('body').removeClass('haveSidebar');
}

Fiddle with side tag

Скриншот без тега

Обновление

Решение без calc(), используя свойство margin-left

main aside {
    width:300px;
    background:red;
    min-height:300px;
    position:relative;
}
main section {
    width:100%;
    background:green;
    min-height:300px;
    float:left;
}
.haveSidebar main section {
    margin-left:301px;
}

Fiddle without calc()

Ответ 3

БЕЗ JAVASCRIPT

Если вы можете изменить порядок своих элементов html на:

<body>
   <main>
      <aside>
      ...
      </aside>

      <section>
      ...
      </section>
   </main>
</body>

Вы можете сделать это так, используя селектор:

aside ~ section {
    max-width: 500px;
}

Ответ 4

Несмотря на то, что это не самый аккуратный способ сделать что-то, вы можете запускать функцию javascript, готовящуюся к документу, чтобы проверить, существует ли в стороне тег, и вставлять встроенный css в тег раздела соответственно.

Ответ 5

Было бы довольно просто выполнить это с помощью JavaScript.

Например, это будет работать:

<script>
    window.onload = function() {
        if (document.getElementsByTagName('aside')[0]) {
           document.getElementsByTagName('section')[0].style.max-width = '500px';
        } else {
            document.getElementsByTagName('section')[0].style.max-width = '1000px';
        }
    }
</script>

Ответ 6

Попробуйте это, я считаю, что это можно сделать только с помощью javascript.

if ($('main').find('aside').length>0)
{
    $('main').find('section').addClass('specificSection');
}

Ответ 7

В CSS есть смежные селекторные функции: http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors

section + aside { ... }

Это поддерживается всеми современными браузерами, включая IE8 + И будьте осторожны: селектор соответствует, если раздел и в стороне имеют один и тот же родительский элемент в дереве документов, а раздел сразу предшествует

Если это не сработает для вас, вы можете попробовать JavaScript с помощью jQuery:

if($('aside').length)) $('section').addClass('specificSection');

Затем добавьте все свои стили в класс .specificSeciton '.

Ответ 8

Если у вас есть возможность отложить свой элемент до раздела 1, вы можете использовать смежные селекторные ролики:

aside + section{ max-width: 500px }

Ответ 9

Используя jQuery, вы можете попробовать что-то вроде:

if($('aside')) $('section').css('max-width','500px');

Только с использованием CSS, у вас может быть другой стиль для типа страницы, в который включено приложение, и как-то только включить этот стиль на эти страницы. Вы можете поместить этот стиль в небольшую таблицу стилей и включить его там, где это необходимо, что, вероятно, является более чистым способом сделать это, чем отображать страницу, а затем изменить ее с помощью JavaScript.