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

#css3

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

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

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

Ответы

Ответ 1

есть  внутри , при фокусе инпута надо изменить бэк-колор 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;
}



Ответ 2

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


Ответ 3

есть  внутри , при фокусе инпута надо изменить бэк-колор 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;
}