Применить стиль к родительскому элементу

@skapunker · Регистрация: 13.12.2013

Студворк — интернет-сервис помощи студентам

Применить стиль к родительскому элементу

Всем привет, подскажите пожалуйста. Вот есть такой код

HTML5
1
2
3
4
<label class="comments_subscribe">
    <input type="checkbox" name="allow_subscribe" id="allow_subscribe" value="1">
    Подписаться на комментарии
</label>

Как мне идентифицировать тег label, за которым идет тег input[type='checkbox']

@6elka1703 · 10.09.2018, 11:25

skapunker, это через js делается. Через jquery еще прлще

@AlexZaw · 10.09.2018, 11:42

Обратится к нему по классу. Если вы хотите получить его именно как родительский элемент, то либо использовать js, либо ждать когда браузеры станут поддерживать псевдокласс :has
Можно использовать следующую конструкцию:

HTML5
1
2
3
4
   <input type="checkbox" name="allow_subscribe" id="allow_subscribe" value="1">
  <label for="allow_subscribe" class="comments_subscribe">
    Подписаться на комментарии
  </label>

и обращаться к label следующим образом:

CSS
1
2
3
#allow_subscribe:checked + label {
  color:red
}

Добавлено через 6 минут

Сообщение от 6elka1703

это через js делается. Через jquery еще прлще

Не проще, а просто короче чем в нативном js. Разумеется если jQuery используется на сайте для работы сторонних скриптов типа слайдеров или еще чего то, то да, можно и с помощью нее обращаться к label. Но подключать ее ради только такой мелочи все-таки не стоит. К тому же, для такого случая можно вообще без js обойтись

@skapunker · 10.09.2018, 14:08 **[ТС]**

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

@AlexZaw · 10.09.2018, 14:11

Сообщение от skapunker

чего делать совсем нехочется.

Тогда остаются либо дополнительные классы, либо js. В CSS3 не существует родительского селектора.

@skapunker · 10.09.2018, 14:25 **[ТС]**

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

Однако, когда я чекбоксу ставлю стиль display:none, то не получается идентифицировать label ((((

@AlexZaw · 10.09.2018, 14:36

Сообщение от skapunker

ообще тут весь смысл операции в том, чтобы задать стиль для чекбокса.

Опять же два выхода - либо с помощью js отлавливать состояние инпута и менять стили для label и/или его псевдоэлемента, либо менять разметку на предложенную выше и обойтись только css

@skapunker · 10.09.2018, 14:39 **[ТС]**

а у самого инпута нельзя сделать квадратик невидимым, но чтобы сам инпут не исчезал?

@AlexZaw · 10.09.2018, 15:20

Сообщение от skapunker

а у самого инпута нельзя сделать квадратик невидимым, но чтобы сам инпут не исчезал?

Можно, задайте ему opacity:0; или visibility:hidden;

Можете задать для label относительное позиционирование, затем добавить после инпута (но внутри label) еще один блок, спозиционировать его абсолютно на место инпута, и менять стили уже этому блоку в зависимости от состояния инпута.
Это опять же изменение разметки, но уже малой кровью так сказать.

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

@6elka1703 91 / 85 / 27 Регистрация: 29.10.2016 Сообщений: 928
	10.09.2018, 11:25
	skapunker, это через js делается. Через jquery еще прлще 0

@skapunker -30 / 25 / 12 Регистрация: 13.12.2013 Сообщений: 1,459
	10.09.2018, 14:08 [ТС]
	тут беда в том, чтобы переставить элементы местами нужно файлы двигателя править, чего делать совсем нехочется. 0

@skapunker -30 / 25 / 12 Регистрация: 13.12.2013 Сообщений: 1,459
	10.09.2018, 14:25 [ТС]
	вообще тут весь смысл операции в том, чтобы задать стиль для чекбокса. Проблема в том, чтобы убрать некрасивый квадратик и поставить на него нормальный значок посредствам псевдокласса. Однако, когда я чекбоксу ставлю стиль display:none, то не получается идентифицировать label (((( 0

@skapunker -30 / 25 / 12 Регистрация: 13.12.2013 Сообщений: 1,459
	10.09.2018, 14:39 [ТС]
	а у самого инпута нельзя сделать квадратик невидимым, но чтобы сам инпут не исчезал? 0