0

Скажите, пожалуйста, (так как не очень дружу с CSS), есть вот такая html:

<div id="mydiv1" class="parent child-1 panda" >Word1</div>

<div id="mydiv2" class="parent child-2 panda" >Word3</div>

<div id="mydiv3" class="parent child-1 panda2" >Word2</div>

Как получить доступ по этим классам (родитель - ребенок - внук, и т.д.)? Например, можно ли так:

.parent child-1 panda {...}
.panda2 {...}
1
  • 1
    плохой вопрос, почитай про цсс, фигню спрашиваешь
    – Gorets
    Commented 16 апр. 2012 в 15:26

2 ответа 2

5

В атрибуте class вы записываете список классов, которые присущи данному div. Т.е. браузер будет пытаться искать css-свойства каждого из этих классов. А в файле стилей .css к ним можно получить доступ так:

.parent { ... }
.child-1 { ... }
.panda2 { ... }

Если ваши элементы находятся друг в друге, например:

<div class="parent">
   <div class="child">
      <div class="vnuk">
...
</div></div></div>

то получить доступ к элементу c классом vnuk, можно перечисляя последовательно все div (т.е. так как они находятся в документе):

.parent .child .vnuk {...}
или просто
.vnuk {...} ("внук" у нас один, если было бы много, то такое объявление применялось бы ко всем "внукам", найденным в документе)

Можно также через id обратиться, например:

#mydiv2 { ... }

(т.е. через точку вы записываете названия классов, а через решетку id) Если вы в атрибуте class запишете, например:

<div class="child vnuk">

то это значит, что свойства будут браться сначала из класса child, а потом из класса vnuk.

6
  • если child-1,child-2,child-3.... можно ли не каждого перечислять, а сразу child{} указать(опускать нумераций)?
    – Vfvtnjd
    Commented 16 апр. 2012 в 15:43
  • Вы можете сделать общее правило с именем класса .child И потом всем элементам дописывать этот класс. Можете еще через запятую перечислить все ваши элементы с одинаковыми свойствами: .child-1, .child-2, .child-3 {color:black}
    – Dobby007
    Commented 16 апр. 2012 в 17:04
  • ух, французский с нижегородским... детский селектор A > B, а не A B который выбирает потомка.
    – karmadro4
    Commented 16 апр. 2012 в 17:04
  • @karmadro4, это если только настолько точно нужно. Пускай так хотя бы пока учится. А то так автор добавит еще один какой-нибудь div и будет материться почему ничего не работает.
    – Dobby007
    Commented 17 апр. 2012 в 6:15
  • В вашем примере нужен непосредственный потомок. Зачем учите делать неправильно?
    – karmadro4
    Commented 17 апр. 2012 в 10:57
0

Через точку.

.parent.child-1.panda {
    color: red;
}

Пример.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.