Input checked какой правильный синтаксис?

@SergeyKagen · Регистрация: 02.04.2018

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

Хотел сделать открытие / скрытие средством JS но решения так и не нашёл, поэтому нашел реализацию такой же идеи на CSS3. Но никак не могу разобраться с синтаксисом.

Рабочая версия кода.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
 
    </head>
    <body>
 
            <section class="checks">
                <!-- Компонент -->
 
                <div id="testvisible">
                    <input type="checkbox" id="toggle">
                    <label for="toggle" onclick>НАЖМИ МЕНЯ</label>
                
                    <div id="vis"><p class="to-be-changed">Информация #2</p></div>
                    <div id="vist"><p class="to-be-changed">Информация #1</p></div>
                                
                
                </div>
    
            </section>
    </body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
body { 
  -webkit-animation: bugfix infinite 1s; 
}
 
 
 
#vis {
    visibility: hidden;
}
 
#vist {
    visibility: visible;
}
 
.checks input[type=checkbox] {
    position: absolute;
    display: none;
}
 
.checks label {
  position: relative;
  cursor: pointer;
  font-weight: 700;
  color: black;
  text-decoration: none;
  text-align: center;
  padding: 0.8em 10em;
  border: 1px solid #37474f;
  border-radius: 6px;
  background: rgb(255,255,255);
  box-shadow: 0 -3px rgb(121,134,203) inset;
  transition: 0.5s;
  -moz-user-select: none; 
  -khtml-user-select: none; 
  user-select: none;
}
 
.checks label:hover {
  background: rgb(250,250,255);
}
 
.checks label:active {
  background: rgb(240,240,255);
  box-shadow: 0 3px rgb(121,134,203) inset;
}
 
 
.checks  input[type=checkbox]:checked ~ #vis {
    visibility: visible;
}
 
.checks input[type=checkbox]:checked ~ #vist {
    visibility: hidden;
}

Но стоит только мне чуть-чуть модернизировать HTML, как код перестаёт работать. Вынес DIV с информацией за #testvisible. В чем ошибка?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
 
    </head>
    <body>
 
            <section class="checks">
                <!-- Компонент -->
 
                <div id="testvisible">
                    <input type="checkbox" id="toggle">
                    <label for="toggle" onclick>НАЖМИ МЕНЯ</label>
                </div>
 
                    <div id="vis"><p class="to-be-changed">Информация #2</p></div>
                    <div id="vist"><p class="to-be-changed">Информация #1</p></div>           
            </section>
    </body>
</html>

@6elka1703 · 26.08.2018, 15:47

SergeyKagen,

CSS
1
2
3
.checks  input[type=checkbox]:checked ~ #vis {
    visibility: visible;
}

знак ~ означает родственные селекторы,т.е. это все все соседние элементы, а вы два дива

HTML5
1
2
<div id="vis"><p class="to-be-changed">Информация #2</p></div>
                    <div id="vist"><p class="to-be-changed">Информация #1</p></div>

вынесли за див

HTML5
1
 <div id="testvisible">

. И теперь

HTML5
1
<input type="checkbox" id="toggle">

не является родственным двум дивам которые вы вынесли.

@SergeyKagen · 26.08.2018, 15:54 **[ТС]**

И как сделать так, что бы он обращался не к родственным элементам? Или такой возможности нет?

@6elka1703 · 26.08.2018, 15:57

SergeyKagen, ну тогда наверное только js вам поможет

@SergeyKagen · 26.08.2018, 16:01 **[ТС]**

Т.е. возможности обратится к не родственным DIV у CSS нет? Я верно понял?

@6elka1703 · 26.08.2018, 16:01

SergeyKagen, хотя можете вынести

HTML5
1
2
<input type="checkbox" id="toggle">
                    <label for="toggle" onclick>НАЖМИ МЕНЯ</label>

за див

HTML5
1
 <div id="testvisible">

и будет работать

Добавлено через 23 секунды
SergeyKagen, да у них должен быть общий родитель

@SergeyKagen · 26.08.2018, 16:09 **[ТС]**

Заодно вопрос. CSS3 поддерживается мобильными устройствами?

@6elka1703 · 26.08.2018, 16:11

SergeyKagen, вот сайт https://caniuse.com/ пишешь туда какое тебе надо свойство и он покажет какие браузеры его поддерживают

Новые блоги и статьи Все статьи Все блоги /
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .

@SergeyKagen 7 / 8 / 3 Регистрация: 02.04.2018 Сообщений: 531
	26.08.2018, 15:54 [ТС]
	И как сделать так, что бы он обращался не к родственным элементам? Или такой возможности нет? 0

@6elka1703 91 / 85 / 27 Регистрация: 29.10.2016 Сообщений: 928
	26.08.2018, 15:57
	SergeyKagen, ну тогда наверное только js вам поможет 0

@SergeyKagen 7 / 8 / 3 Регистрация: 02.04.2018 Сообщений: 531
	26.08.2018, 16:01 [ТС]
	Т.е. возможности обратится к не родственным DIV у CSS нет? Я верно понял? 0

@SergeyKagen 7 / 8 / 3 Регистрация: 02.04.2018 Сообщений: 531
	26.08.2018, 16:09 [ТС]
	Заодно вопрос. CSS3 поддерживается мобильными устройствами? 0

@6elka1703 91 / 85 / 27 Регистрация: 29.10.2016 Сообщений: 928
	26.08.2018, 16:11
	SergeyKagen, вот сайт https://caniuse.com/ пишешь туда какое тебе надо свойство и он покажет какие браузеры его поддерживают 0