Есть ли селектор CSS «предыдущий брат»?

Question

Знак плюс (+) предназначен для следующего брата. Есть ли эквивалент для предыдущего брата?

Answer 1

К сожалению, «предыдущий» селектор братьев и сестер отсутствует, но вы можете возможно по-прежнему получать тот же эффект, используя позиционирование (например, с плавающей точкой справа). Это зависит от того, что вы пытаетесь сделать.

В моем случае я хотел использовать 5-звездочную рейтинговую систему CSS. Мне нужно будет покрасить (или поменять иконку) предыдущие звезды. Плавая каждый элемент вправо, я, по сути, получаю тот же эффект (поэтому HTML для звездочек должен быть написан «в обратном направлении»).

Я использую FontAwesome в этом примере и меняю местами юникоды fa-star-o и fa-star http://fortawesome.github.io/Font-Awesome/

CSS:

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* set all stars to 'empty star' */
.stars-container {
    display: inline-block;      
}   

/* set all stars to 'empty star' */
.stars-container .star {
    float: right;
    display: inline-block;
    padding: 2px;
    color: orange;
    cursor: pointer;

}

.stars-container .star:before {
    content: "\f006"; /* fontAwesome empty star code */
}

/* set hovered star to 'filled star' */
.star:hover:before{
    content: "\f005"; /* fontAwesome filled star code */
}

/* set all stars after hovered to'filled star' 
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
    content: "\f005"; /* fontAwesome filled star code */
}

HTML: (40)

JSFiddle: http://jsfiddle.net/andrewleyva/88j0105g/

Answer 2

У меня была похожая проблема, и я обнаружил, что все проблемы такого рода можно решить следующим образом:

1. придайте стиль всем вашим вещам.
2. придать выбранному предмету стиль.
3. назначьте стиль следующим элементам, используя + или ~.

и таким образом вы сможете стилизовать свои текущие, предыдущие элементы (все элементы, переопределенные с текущими и следующими элементами) и ваши следующие элементы.

пример:

/* all items (will be styled as previous) */
li {
  color: blue;
}

/* the item i want to distinguish */
li.milk {
  color: red;
}

/* next items */
li ~ li  {
  color: green;
}


<ul>
  <li>Tea</li>
  <li class="milk">Milk</li>
  <li>Juice</li>
  <li>others</li>
</ul>

Надеюсь, это кому-нибудь поможет.

Answer 3

В зависимости от вашей конкретной цели, есть способ достичь полезности родительского селектора, не используя один (даже если бы он существовал) ...

Скажем, у нас есть:

<div>
  <ul>
    <li><a>Pants</a></li>
    <li><a>Socks</a></li>
    <ul>
      <li><a>White socks</a></li>
      <li><a>Blue socks</a></li>
    </ul>
  </ul>
</div>

Что мы можем сделать, чтобы блок Socks (включая цвета носков) выделялся визуально, используя интервалы?

Что бы хорошо, но не существует:

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

Что существует:

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

Устанавливает для всех якорных ссылок верхнюю границу в 15px и сбрасывает его обратно в 0 для тех, у которых нет элементов UL (или других тегов) внутри LI.

Answer 4

Мне нужно решение, чтобы выбрать предыдущий родной брат tr. Я придумал это решение, используя компоненты React и Styled. Это не мое точное решение (это по памяти, часы спустя). Я знаю, что есть ошибка в функции setHighlighterRow.

OnMouseOver строка будет устанавливать индекс строки в состояние и перерисовывает предыдущую строку новым цветом фона

class ReactClass extends Component {
  constructor() {
    this.state = {
       highlightRowIndex: null
    }
  }

  setHighlightedRow = (index) => {
    const highlightRowIndex = index === null ? null : index - 1;
    this.setState({highlightRowIndex});
  }

  render() {
    return (
       <Table>
        <Tbody>
           {arr.map((row, index) => {
                const isHighlighted = index === this.state.highlightRowIndex
                return {
                    <Trow 
                        isHighlighted={isHighlighted}
                        onMouseOver={() => this.setHighlightedRow(index)}
                        onMouseOut={() => this.setHighlightedRow(null)}
                        >
                        ...
                    </Trow>
                }
           })}  
        </Tbody>   
       </Table>
    )
  }
}

const Trow = styled.tr`
    & td {
        background-color: ${p => p.isHighlighted ? 'red' : 'white'};
    }

    &:hover {
        background-color: red;
    }
`;

Answer 5

Нет. Это невозможно через CSS. Он принимает «Каскад» близко к сердцу; -).

---

Однако, если вы можете добавить JavaScript на свою страницу, чуть-чуть jQuery может привести вас к конечной цели.
Вы можете использовать jQuery find, чтобы выполнить предварительный просмотр целевого элемента / класса / идентификатора, а затем вернуться назад, чтобы выбрать цель.
Затем вы используете jQuery для перезаписи DOM (CSS) для вашего элемента.

Основано на ответе Майка Бранта , следующий фрагмент jQuery может помочь.

$('p + ul').prev('p')

Сначала выбираются все <ul> с, следующие сразу за <p>.
Затем он «возвращается», чтобы выбрать все предыдущие <p> с из этого набора <ul> с.

Фактически, «предыдущий брат» был выбран с помощью jQuery.
Теперь используйте функцию .css, чтобы передать новые значения CSS для этого элемента.

---

В моем случае я искал способ выбрать DIV с идентификатором #full-width, но ТОЛЬКО если он имел (косвенный) потомок DIV с классом .companies.

Я контролировал весь HTML-код под .companies, но не мог изменить ни один из HTML-кодов над ним.
И каскад идет только в 1 направлении: вниз.

Таким образом, я могу выбрать ВСЕ #full-width с.
Или я могу выбрать .companies, который следует только за #full-width.
Но я мог не выбрать только #full-width с, которые продолжались .companies.

И, опять же, я не смог добавить .companies выше в HTML. Эта часть HTML была написана извне и обернула наш код.

Но с помощью jQuery я могу выбрать необходимые #full-width с, а затем назначить соответствующий стиль:

$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );

Это находит все #full-width .companies и выбирает только те .companies, аналогично тому, как селекторы используются для нацеливания на определенные элементы в стандарте в CSS.
Затем он использует .parents для «возврата» и выбора ВСЕХ родителей .companies,
но фильтрует эти результаты, чтобы сохранить только #fill-width элементов, так что в итоге
он выбирает элемент #full-width, только если у него есть потомок класса .companies.
Наконец, он присваивает новое значение CSS (width) результирующему элементу.

$(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");

div {
  background-color: lightblue;
  width: 120px;
  height: 40px;
  border: 1px solid gray;
  padding: 5px;
}
.wrapper {
  background-color: blue;
  width: 250px;
  height: 165px;
}
.parent {
  background-color: green;
  width: 200px;
  height: 70px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="wrapper">

  <div class="parent">
    "parent" turns red
    <div class="change-parent">
    descendant: "change-parent"
    </div>
  </div>
  
  <div class="parent">
    "parent" stays green
    <div class="nope">
    descendant: "nope"
    </div>
  </div>
  
</div>
Target <b>"<span style="color:darkgreen">parent</span>"</b> to turn <span style="color:red">red</span>.<br>
<b>Only</b> if it <b>has</b> a descendant of "change-parent".<br>
<br>
(reverse cascade, look ahead, parent un-descendant)
</html>

Справочные документы jQuery:
$ () или jQuery () : элемент DOM.
. find : Получить потомков каждого элемента в текущем наборе соответствующих элементов, отфильтрованных селектором, объектом jQuery или элементом.
. parent : Получить непосредственно предшествующего брата каждого элемента в наборе соответствующих элементов. Если указан селектор, он извлекает предыдущего родного брата, только если он соответствует этому селектору (фильтрует результаты, чтобы включить только перечисленные элементы / селекторы).
. css : установить одно или несколько свойств CSS для набора соответствующих элементов.