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

@nev · Регистрация: 16.08.2013

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

Здравствуйте !
Как с помощью css добавить свойства в родительский элемент ?
например:

HTML5
1
2
<div>
<ul class="menu">

У меня все сделано так:

CSS
1
2
3
4
5
div.type1{
background:red;
}div.type2{
background:blue;
}

Как сделать если .type* не указан то по умолчанию было:

CSS
1
2
3
div{
background:grey;
}

@whiteapps · 18.07.2014, 14:40

nev,
1) в css нельзя обращаться родительскому элементу. равно как и обращаться к предыдущему. это вызвано спецификой работы парсера css. и подобный функционал, по крайней мере в прогнозируемом будущем добавлять не будут

2) если перед

CSS
1
2
3
4
5
div.type1{
background:red;
}div.type2{
background:blue;
}

поставить

CSS
1
2
3
div{
background:grey;
}

то для блоков которые не имею класс type фон будет серый

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

@mlebronm · 18.07.2014, 14:55

Можно еще так, если у него задан класс, как мы видим, то фон тоже будет серым только у того списка, которому присвоен класс menu. Если я его правильно понял, то он этого хотел.

CSS
1
2
3
div .menu{
background:grey;
}

Возможно он хочет сделать для двух списков разные фоны, тогда нужно указать каждому ul'y класс, первому соответственно class="type1", другому class="type2"

@nev · 18.07.2014, 15:27 **[ТС]**

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

Код CSS
div .menu{
background:grey;
}

Если я сделаю так, то получится вот что:

@mlebronm · 18.07.2014, 15:38

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

Если я сделаю так, то получится вот что:
Миниатюры

Так задай div'y класс или идентификатор

@nev · 18.07.2014, 15:39 **[ТС]**

Не я хочу чтобы если не указан класс type* до по умолчанию был серый фон

@whiteapps · 18.07.2014, 15:49

nev,
покажи свой html, css
как у тебя сейчас отображается и как должно

@nev · 18.07.2014, 15:52 **[ТС]**

Код большой, приведу фрагменты.

CSS
1
2
3
4
5
6
7
8
9
10
11
.b{border: 1px solid black;}
.r5{border-radius:5px;}
div .type{background-color: rgba(0,0,0,0.7);}
ul.menu.horisontal {min-width: 400px;max-width: 100%;margin: 5px;}
ul.menu.horisontal {display:table-row;}
ul.menu.horisontal li {display:table-cell;width:auto;height:50px;text-align:center;vertical-align:bottom;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
ul.menu.horisontal li:hover{background-color: rgba(0, 0, 0, 0.2);}
ul.menu.horisontal li a {color:#fff;font:bold 14px Verdana;height:50px;display:table-cell;width:120px;vertical-align:middle;text-decoration:none;}
ul.menu.horisontal li a:hover {text-decoration:underline;}
.type1{background-color: #2B587A;}
.type2{background: url(menu-bg.png) repeat-x;}

HTML5
1
2
3
4
5
6
7
8
9
<div class="type1 b r5"> <!--мне нужно чтобы без .type отображался просто серый фон-->
        <ul class="menu horisontal">
        <li><a href="#">Пункт меню</a></li>
        <li><a href="#">Пункт меню</a></li>
        <li><a href="#">Пункт меню</a></li>
        <li><a href="#">Пункт меню</a></li>
        <li><a href="#">Пункт меню</a></li>
        <li><a href="#">Пункт меню</a></li>
        </ul></div>

@whiteapps · 18.07.2014, 16:01

тогда добавьте для вашего div

CSS
1
2
3
какой-то_родительский_элемент > div {
   background-color: #ccc;
}

если класс type не указан будет серый, если указан цвет переопределяется

или вы ищете способы искусственно усложнить себе задачу?

@nev · 18.07.2014, 16:06 **[ТС]**

После родительского элемента (#content) у меня несколько div-ов.

@whiteapps · 18.07.2014, 16:34

nev, почему бы не добавить какой-нибудь селектор к нужному div как говорил mlebronm?

вообще, если вы хотите допустим найти элементы у которых нет класса начинающего с type*
то это делается так

CSS
1
2
3
    div:not([class*=type]) {
      background:grey;
    }

хотя не понятно зачем это вам здесь, т.к. этот селектор заденет все div внутри контейнера

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@nev 1 / 1 / 2 Регистрация: 16.08.2013 Сообщений: 68
	18.07.2014, 15:39 [ТС]
	Не я хочу чтобы если не указан класс type* до по умолчанию был серый фон 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	18.07.2014, 15:49
	nev, покажи свой html, css как у тебя сейчас отображается и как должно 0

@nev 1 / 1 / 2 Регистрация: 16.08.2013 Сообщений: 68
	18.07.2014, 16:06 [ТС]
	После родительского элемента (#content) у меня несколько div-ов. 0