如何将css属性应用于我的第一个div类

Question

I am having two dhx_scroll_cont div class, when i write css code as bellow it working for two classes. Now i want to write a css code that apply for first div call

.dhx_scroll_cont:before{
    //some code here
    }

Answer 1

Demo Fiddle

Simply use:

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

more on first-of-type

The :first-of-type CSS pseudo-class represents the first sibling of its type in the list of children of its parent element.

---

Update

According to the screenshot the OP posted the below should work:

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

Answer 2

Depending on the structure of your HTML the solution you require will change.

Would you be able to provide the HTML structure for us to work from?

Otherwise, you could:

Add another class to the div you want to change

By having <div class="dhx_scroll_cont"> you are only giving one targetable class. One way around this is having 2 classes separated by a space, such as:

<div class="dhx_scroll_cont OTHER_CLASS">

This will allow you to target the class OTHER_CLASS with the certain CSS values that you want effecting the first div.

Using :first-child or :first

:first-child and :first allow you to target the div that is the first child element of it's parent. For example:

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

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

    </div>
</div>

dhx_scroll_cont:first-child {
    CSS HERE
}

This will effect the first dhx_scroll_cont div.

As I said previously, if you can give some more information on the structure of your HTMl it would help us with your solution.

EDIT

---

Thanks for showing the HTML structure.

With that structure out of the methods that I have shown, adding another class to the first of the dhx_scroll_cont will allow you to specifically target that div, and not the other one.