Изменить стиль родителя в CSS3

Question

Как изменить стиль родительского контейнера при фокусе текущего силами CSS?

Например, есть <td> внутри <input>.
При фокусе на input надо изменить цвет фона td.

Остальные варианты сведутся к написанию js, т.к. инпут добавляется по событию, а у td есть padding, от которого не хочется избавляться, так как это приведет еще к одному контейнеру.

Нет, но в зависимости от того, что конкретно требуется изменить, можно попытаться это сделать другими способами. Предлагаю уточнить вопрос. — Qwertiy, Feb 01 '16 at 13:55
уточнять не нужно, как сделать это на js я знаю — ordman, Feb 01 '16 at 14:49
Я имел в виду, может удастся сделать без js другим способом. — Qwertiy, Feb 01 '16 at 14:50
@Qwertiy, есть внутри , при фокусе инпута надо изменить бэк-колор td, остальные варианты сведутся к написанию js, т.к. инпут добавляется по событию, а у td есть padding, от которого избавляться не хочу, так как это приведет еще к одному контейнеру — ordman, Feb 01 '16 at 14:53
@DmitryOnGamer лучше вносить важную информацию в сам вопрос, а не использовать комментарии. — Timofei Bondarev, Feb 01 '16 at 16:06

score 8 · Answer 1 · answered Feb 01 '16 at 13:52

8

CSS не позволяет обращаться к родительскому элементу. Для этого можно использовать JavaScript или jQuery (parentNode или parent() соответственно).

answered Feb 01 '16 at 13:52

Misandra

177

Qwertiy · Accepted Answer · 2016-02-01T16:02:15.840

есть <td> внутри <input>, при фокусе инпута надо изменить бэк-колор td

А ещё, можно использовать такой костыль:

html {
  background: radial-gradient(ellipse at center, #877cff 0%, #ff4747 100%) no-repeat;
  min-height: 100%;
}
table, tr, td {
  border-collapse: collapse;
  border: 1px solid;
}
td {
  padding: 1em;
  overflow: hidden;
}
td, input {
  background: transparent;
}
input {
  border: 1px solid silver;
}
input:focus {
  background: yellow;
  outline: 9999px solid yellow;
  outline-offset: 0;
}

<table>
  <tr><td><input><td><input><td><input></tr>
  <tr><td><input><td><input><td><input></tr>
  <tr><td><input><td><input><td><input></tr>
</table>

А ведь вариант со спаном лучше... – Qwertiy Feb 01 '16 at 16:53 — Qwertiy, Feb 01 '16 at 16:53

Qwertiy · Answer 3 · 2016-02-01T16:02:40.530

есть <td> внутри <input>, при фокусе инпута надо изменить бэк-колор td

Если position не мешает, то можно так:

html {
  background: radial-gradient(ellipse at center, #877cff 0%, #ff4747 100%) no-repeat;
  min-height: 100%;
}
table, tr, td {
  border-collapse: collapse;
  border: 1px solid;
}
td {
  padding: 1em;
  position: relative;
}
td, input, span {
  background: transparent;
}
input {
  border: 1px solid silver;
}
span {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
input:focus + span {
  background: yellow;
}

<table>
  <tr><td><input><span></span><td><input><span></span><td><input><span></span></tr>
  <tr><td><input><span></span><td><input><span></span><td><input><span></span></tr>
  <tr><td><input><span></span><td><input><span></span><td><input><span></span></tr>
</table>

Изменить стиль родителя в CSS3

3 Answers3