CSS псевдоклассы

0

У меня проблема, может быть, это очевидно, но я не мог найти ответы, как это сделать.

У меня есть такая структура на моем сайте:

<div class="row-even">
     <article class="featured-job">a</article>
</div>
<div class="row-odd">
     <article class="featured-job">b</article>
</div>
<div class="row-even">
     <article class="regular-job">a</article>
</div>
<div class="row-odd">
     <article class="regular-job">b</article>
</div>
<div class="row-even">
     <article class="regular-job">c</article>
</div>

Эта крошечная вещь генерируется PHP для перечисления статей из двух типов: Избранной работы и обычной работы. Я хочу разделить эти два типа контента, добавив верхний край для первой из статей с регулярной работой. Я попытался использовать строку first-, first-, first- типа, все из first- * и даже попытался nth-child, но ничего не сработало для меня.
(Я знаю, что эти разделители работают над родителем элемента, который я использую.)

Можно ли это сделать?

Теги:

4 ответа

0
Лучший ответ

Как говорит Свен, проблема в том, что вам нужны элементы, которые будут братьями и сестрами для работы этих селекторов.

Установите класс в родительском объекте, соответствующий одному из дочерних элементов:

HTML

<div class="row-even featured-father">
     <article class="featured-job">a</article>
</div>
<div class="row-odd featured-father">
     <article class="featured-job">b</article>
</div>
<div class="row-even regular-father">
     <article class="regular-job">a</article>
</div>
<div class="row-odd regular-father">
     <article class="regular-job">b</article>
</div>
<div class="row-even  regular-father">
     <article class="regular-job">c</article>
</div>

Затем легко установить CSS. например:

.featured-father + .regular-father article {
    background-color: red;
}

играть на скрипке

Поделиться
  • 0
    Спасибо за ответ и, конечно же, спасибо за Свена! Обидно, что CSS не поддерживает такого рода вещи.
1

Проблема с первичным и regular-job состоит в том, что статьи не находятся непосредственно в одном и том же родителе, потому что они вложены в row-even и row-odd. Вы либо могли бы обернуть строки regular-job в другой div который применяет маржу, или добавляет другой класс в первую строку, содержащую regular-job. Вы даже можете добавить класс непосредственно к первой regular-job.

Я не знаю, как выглядит PHP-цикл, но, возможно, попробуйте использовать счетчик.

При необходимости я с радостью предоставит пример HTMl/CSS!

Поделиться
  • 0
    Существует форма, в которой вы можете выбрать, является ли публикация обычной или избранной работой , поэтому, если публикация была написана, самая новая публикация перейдет в самую верхнюю часть блока. Таким образом, если вы отправите форму с типом содержимого Обычная работа , она появится (в данном случае) на третьем месте кода. (Это будет первый из классов обычной работы.) Из-за этого я не могу просто добавить прямой класс для первой обычной работы.
1

Вероятно, вы захотите сделать следующее:

div:first-child .regular-job {
    margin-top: 20px;
}

Вы выбираете первый родительский элемент, у которого есть дочерний элемент.featured-job.

PS. Будьте осторожны, когда вы применяете маржу, она не будет работать на встроенных элементах или если вы хотите отделить родительские элементы, а затем применить ее к статье, это не очень хорошая идея.

Поделиться
  • 0
    Что если первый div не содержит .regular-job ?
  • 0
    @Mathias Тогда используйте div:first-child > div { margin-top: 20px; } Еще лучше: назначьте верхний отступ 20px для первого встречающегося div - это также уменьшает проблему, когда вертикальные поля могут разрушаться .
Показать ещё 2 комментария
-2

итерации в PHP, добавьте еще один фиктивный класс с индексом. Тогда это будет кусок пирога, чтобы сделать свой собственный класс:

<div class="row-even featured_1">
     <article class="featured-job">a</article>
</div>
<div class="row-odd featured_2">
     <article class="featured-job">b</article>
</div>
<div class="row-even regular_1">
     <article class="regular-job">a</article>
</div>
<div class="row-odd regular_2">
     <article class="regular-job">b</article>
</div>
<div class="row-even regular_3">
     <article class="regular-job">c</article>
</div>

обратите внимание на два введенных класса: featured_X и regular_X.

тогда:

.regular_1{
margin-top:50px;
}
Поделиться
  • 0
    Извините, но я бы действительно советовал не программировать, как это. Трудно поддерживать и не семантически. Это быстрый способ программирования.
  • 0
    Ок, у каждого свое видение вещей. Но я считаю, что это самый простой и простой способ сделать это. Это будет работать 9,9999% всех браузеров. Не думайте, что это слишком сложно поддерживать. В противном случае наличие сложного правила CSS может привести к отладке бессонных ночей, например, в IE7 ничего не происходит.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню