как применить свойство css только к моему первому классу div

Question

как применить свойство css только к моему первому классу div

0

У меня есть два класса dhx_scroll_cont div, когда я пишу css-код, как показано ниже, он работает для двух классов. Теперь я хочу написать код css, который применяется для первого div-вызова

.dhx_scroll_cont:before{
    //some code here
    }

Ravi Varma 08 май 2014, в 16:11

Источник

Теги:

html

css

css3

2 ответа

0

В зависимости от структуры вашего HTML решение, которое вам требуется, изменится.

Сможете ли вы предоставить HTML-структуру для работы?

В противном случае вы можете:

Добавьте еще один класс в div, который хотите изменить

Имея <div class="dhx_scroll_cont"> вы <div class="dhx_scroll_cont"> только один целевой класс. Один из способов состоит в том, чтобы иметь 2 класса, разделенных пробелом, например:

<div class="dhx_scroll_cont OTHER_CLASS">

Это позволит вам настроить класс OTHER_CLASS с определенными значениями CSS, которые вы хотите произвести для первого div.

Использование :first-child или :first

:first-child и :first разрешите вам настроить таргетинг на div, который является первым дочерним элементом этого родителя. Например:

<div class="surround">
    <div class="dhx_scroll_cont">

    </div>
    <div class="dhx_scroll_cont">

    </div>
</div>

dhx_scroll_cont:first-child {
    CSS HERE
}

Это повлияет на первый div dhx_scroll_cont.

Как я уже говорил ранее, если вы можете дать дополнительную информацию о структуре своего HTMl, это поможет нам с вашим решением.

РЕДАКТИРОВАТЬ

Спасибо за отображение структуры HTML.

С помощью этой структуры из методов, которые я показал, добавление другого класса в первый из dhx_scroll_cont позволит вам специально настроить таргетинг на этот div, а не на другой.

Mallander 08 май 2014, в 12:14

Ещё вопросы

SW4 · Accepted Answer · 2014-05-08T11-45-00.000Z

Демо-скрипт

Просто используйте:

.dhx_scroll_cont:first-of-type:before{
    //some code here
}

больше на first-of-type

Псевдокласс класса first-of-type представляет первый родной тип своего типа в списке дочерних элементов его родительского элемента.

Обновить

В соответствии с скриншотом OP, опубликованный ниже, должен работать:

.dhx_view_day_events .dhx_scroll_cont:first-of-type:before{
    //some code here
}

Я пытался это, но это не работает для меня
@RaviVarma - это должно работать с учетом предоставленного вами кода, можете ли вы дать еще немного CSS, HTML или jsfiddle.net?
хотя есть ловушка , если класс был применен к разным тегам (div, p, section), то jsfiddle.net/7xFDH/1
@Ejay - если вы возьмете предоставленный код OP, класс сам по себе, предоставленный jsFiddle был только для иллюстрации first-of-type
Да, это в значительной степени зависит от контекста, но лучше, чем :first-child . Я пытался добавить больше пользы для ответа ( у Вас есть свой upvote) :)
@Ejay - у вас есть точка зрения, для меня может быть лучше использовать классы в примере :)
перейдите ниже снимок экрана i.imgur.com/TMT87a6.png?1
Вы должны быть в состоянии использовать: .dhx_view_day_events .dhx_scroll_cont:first-of-type:before в качестве селектора