Как я могу правильно вставить условие :has() и :nth-child() в этот CSS?

Я хочу написать собственный CSS для редактора Obsidian. Рассматриваемое дерево элементов выглядит следующим образом:

.markdown-embed
  .markdown-embed-title
  .markdown-embed-content
    .markdown-preview-view
      .markdown-preview-sizer
        div
          some content
        div
          some content
        div
          some content
        div
          some content

По сути, есть куча вложенных классов, а затем несколько div, содержащих текст, заголовки, список и так далее. Я хочу отключить (установить display: none;) .markdown-embed-title и все заголовки в третьем div, но только если .markdown-embed-title пуст.

Я подозреваю, что это должно быть возможно с помощью :empty и, возможно, :has(), чтобы проверить, пуст ли заголовок, и :nth-child(3), чтобы выбрать только третий div. Но пока я не мог понять, как это сделать.

На данный момент я могу выбрать заголовок и все заголовки во всех div, используя следующий CSS (я меняю цвет вместо видимости, все, что красное, должно быть скрыто позже):

.markdown-embed-title {
  color: crimson;
}

.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer>div :is(h1, h2, h3, h4, h5, h6) {
  color: crimson;
}

Это дает мне такой результат:

Все идет нормально. Я подумал, что теперь могу просто выбрать третий div, изменив селектор перед заголовками на ...>div:nth-child(3). Однако это не работает, и все заголовки теперь отображаются черным цветом.

Я также подумал, что могу включить логику, согласно которой заголовки должны затрагиваться только в том случае, если заголовок пуст, изменив селектор на .markdown-embed-content:has(+ .markdown-embed-title:empty())>..., в основном проверяя, пуст ли родной элемент. Это тоже не сработало, и заголовки не затронуты.

Что я делаю не так?

css obsidian

21.12.2022 16:48

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это можно сделать несколькими способами. Я сделал так, чтобы div окрашивался в красный или желтый цвет, чтобы вы могли видеть, как он применяется, а не с помощью display: none, но, надеюсь, вы видите, как это работает. Красный использует :has(), а желтый использует общий комбинатор родственных элементов. Последнее больше поддерживается.

.markdown-embed:has(.markdown-embed-title:empty) .markdown-preview-sizer div:nth-child(3) {
  background-color: red;
}

.markdown-embed .markdown-embed-title:empty~.markdown-embed-content .markdown-preview-sizer div:nth-child(3) {
  color: yellow;
}

Has a title
<div class = "markdown-embed">
  <div class = "markdown-embed-title">This is a Title</div>
  <div class = "markdown-embed-content">
    <div class = "markdown-preview-sizer">
      <div>Some content 1</div>
      <div>Some content 2</div>
      <div>Some content 3</div>
      <div>Some content 4</div>
    </div>
  </div>
</div>
<hr> No title
<div class = "markdown-embed">
  <div class = "markdown-embed-title"></div>
  <div class = "markdown-embed-content">
    <div class = "markdown-preview-sizer">
      <div>Some content 1</div>
      <div>Some content 2</div>
      <div>Some content 3</div>
      <div>Some content 4</div>
    </div>
  </div>
</div>

Спасибо за быстрый ответ! Это сработало для меня. Можете ли вы объяснить, почему это не сработало, когда я просто добавил has() и nth-child() в свой код? Я думаю, это связано с > между занятиями?

— 21.12.2022 18:10

Это не сработало, потому что в .markdown-embed-content нет .markdown-embed-title, и если вы исправите это, смежный комбинатор будет работать только в том случае, если .markdown-embed-title появится после .markdown- embed.content в ваш html

— 21.12.2022 18:39

Ах, ладно, я не знал, что родственный комбинатор будет работать только в одном направлении! Спасибо!

— 22.12.2022 09:09

21.12.2022 17:10