Стили CSS для вложенных элементов

@vlad-55 · Регистрация: 21.02.2009

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

С этими div я всегда путаюсь. Как понимать

CSS
1
.container > div

Комментарий модератора

Один вопрос - одна отдельная тема!

@Fedor92 · 02.11.2016, 18:05

Сообщение от vlad-55

С этими div я всегда путаюсь. Как понимать

div вложенный в блок с классом container

@vlad-55 · 02.11.2016, 18:59 **[ТС]**

А можно ли это выражение записать по-другому?

CSS
1
.container > div

@Fedor92 · 02.11.2016, 19:03

vlad-55, можно так записать:

CSS
1
.container div

Без стрелочки...

@vlad-55 · 02.11.2016, 19:16 **[ТС]**

А без стрелочки это уже не работает!

Добавлено через 2 минуты
Где бы почитать о такой конструкции?

@Fedor92 · 02.11.2016, 19:23

Сообщение от vlad-55

А без стрелочки это уже не работает!

Да ладно...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container div{color:red}
    </style>
</head>
<body>
    <div class="container">
        <div>Lorem ipsum</div>
    </div>
</body>
</html>

Сообщение от vlad-55

Где бы почитать о такой конструкции?

Там читать особо нечего... Лучше всего задать класс диву и через класс написать стили, чем писать такие раскоряки...

@vlad-55 · 02.11.2016, 19:28 **[ТС]**

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

Лучше всего задать класс диву и через класс написать стили, чем писать такие раскоряки...

Это я из сети взял готовый пример. Именно, что раскоряки.

Но, тем не менее, без стрелочек не работает:

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
    .container {
        font-size: 0; /*fix white space*/
    }
    .container div {
        font-size: 16px; /*reset font size*/
        display: inline-block;
        vertical-align: top;
        width: 33.33%;
        border: 1px solid red;
        box-sizing: border-box;
        text-align: center;
    }
     
    @media (max-width: 480px) { /*breakpoint*/
        .container div {
            display: block;
            width: 100%;
            font-size: 10px;
            border: 1px solid #060;
        }
        
        .tele{
            display:none
        }
    }

@vlad-55 · 02.11.2016, 19:29 **[ТС]**

А как бы Вы написали этот код "без раскоряк"? Я тыркаюсь, но что-то без раскоряк, с какими-то иными вариантами, не работает.

@Fedor92 · 02.11.2016, 19:35

Сообщение от vlad-55

А как бы Вы написали этот код "без раскоряк"? Я тыркаюсь, но что-то без раскоряк не работает.

А почему Вы думаете, что код не работает?

Он работает... Только правила применились ко всем вложенным в контейнер дивам...

Если в Вашем случае правило надо применить только к дивам первого уровня тогда так:

CSS
1
.container div:not(.tele){Стили...}

А переписал бы я так...

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width">
    <style>
    .container {
        font-size: 0; /*fix white space*/
    }
    .block {
        font-size: 16px; /*reset font size*/
        display: inline-block;
        vertical-align: top;
        width: 33.33%;
        border: 1px solid red;
        box-sizing: border-box;
        text-align: center;
    }
     
    @media (max-width: 480px) { /*breakpoint*/
        .container > div {
            display: block;
            width: 100%;
        }
        
        .tele{
            display:none
        }
    }
    </style>
</head>
<body>
    <div class="container">
    <div class="block"><p>Левый блок</p>
        <div class="tele"><p>НЕТ</p></div>    
    </div>
    
    <div class="block"><p>Средний блок</p></div>
    
    <div class="block">    
        <div class="tele"><p>Правый блок</p></div>
    </div>
</div>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию 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 Решили писать научную статью с неким РОманом

@vlad-55 156 / 20 / 5 Регистрация: 21.02.2009 Сообщений: 2,787
	02.11.2016, 19:16 [ТС]
	А без стрелочки это уже не работает! Добавлено через 2 минуты Где бы почитать о такой конструкции? 0

@vlad-55 156 / 20 / 5 Регистрация: 21.02.2009 Сообщений: 2,787
	02.11.2016, 19:29 [ТС]
	А как бы Вы написали этот код "без раскоряк"? Я тыркаюсь, но что-то без раскоряк, с какими-то иными вариантами, не работает. 0

Стили CSS для вложенных элементов

Решение