Ориентация первого видимого элемента с помощью чистого CSS

Ответ 1

В чистом CSS, это не возможно. Крис Койер: вначале он представлен как конструкция jQuery: http://css-tricks.com/pseudo-class-selectors/.

Ответ 2

Как абстрактное, это невозможно: jQuery полагается на обход DOM для программного определения элемента, который подходит для разных условий, а затем останавливается. Вы не можете этого сделать. Но я предполагаю, что на практике вы будете знать разные вещи. Это решение предполагает:

• Вы знаете, как эти элементы .child будут скрыты. Будут ли они иметь display: none как встроенный стиль (если вы используете jQuery .hide() на них, они будут)? Есть ли у них класс .hidden? Пока вы знаете метод, будет выбран селектор, который вы можете использовать для его представления. Вы можете использовать это в сочетании с селектором CSS3 :not().
• Поскольку они называются .child, я предполагаю, что они все братья и сестры - ни один из них не вложен в другие элементы .child, и все они имеют один и тот же родительский элемент.

Если одно из приведенных выше значений неверно, это невозможно. Но если они оба верны:

.child:not( [style*='display: none'] ) {
    border-top:    1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

.child:not( [style*='display: none'] ) ~ .child:not( [style*='display: none'] ) {
    /* ...or whatever the default styles are */
    border-top:    none;
    border-bottom: none;
}

Псевдокласс класса :not() довольно очевиден: он выбирает только элементы, которые не соответствуют содержащемуся селектору. Оператор ~ означает, что селектор вправо будет мишенью, если он является потомком селектора слева, появляющимся впоследствии в исходном коде.

Ответ 3

Это возможно, если вы знаете, как реализовано скрытие. Например, это будет работать:

li:first-child[style*="display:none"] + li:not([style*="display:none"]) {
  /* ... */
  background-color: blue;
}

<ul>
  <li style="display:none">hello</li>
  <li>World!</li>
</ul>

Ответ 4

попробуйте этот пример

ul li{
    background: lightslategrey
}
li:first-child{
  background: blue;
}
ul li[style*="display:none"] + li:not([style*="display:none"]){
  background: blue;
}
ul li:not([style*="display:none"]) + li{
  background: blue;
}
ul > li:not([style*="display:none"]) ~ *{
  background: lightslategrey!important;
}

Ответ 5

В моем случае, я только должен был дать отступы перед первым Ли я смог добиться того, что с помощью следующего кода.

ul:before {
  content: ' ';
  height: 15px;
  display: block;
}

Но если вы хотите дать конкретный CSS, то вам придется следовать трюкам, упомянутым в других ответах.

Все мои элементы li ожидают, что у первой была граница.

Так что, если мой первый li был скрыт, второй элемент все еще показывал border-top. Я обновил приведенный выше код, чтобы убедиться, что у всех элементов li есть border-top, и я просто спрятал первый border-top, используя трюк на полях

ul {
  content: ' ';
  height: 15px;
  display: block;
  margin-bottom: -1px; // (update as per the width of your border-top)*
  z-index: 2;
  position: relative;
}

Если ваш border-top равен 3px, то margin-bottom будет -3px, и прибавьте это к высоте для баланса (18px).

Это просто трюки, так как у CSS нет селектора: visible