0

I´m trying to do something similar to this: https://stackoverflow.com/a/8539107/1743291

I want to give the first element of a class a different style from the other elements using the same class.

So I created something like this following the workaround from the post above:

.kn-menu > .control.has-addons {
border: 1px solid red;}

.kn-menu > .control.has-addons ~ .control.has-addons {
border: none;}

But this is not working for me.

Can anyone tell me what is wrong with my approuch?

Thanks!

Guilherme Bastian
  • 11
  • 2

3 Answers3

0

You can use the first-of-type pseudo class:

  .test {
    width: 200px;
    height: 100px;
    margin: 10px;
    background-color: green;
  }
  .test:first-of-type{
    background-color: red;
  }
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
clod9353
  • 1,942
  • 2
  • 5
  • 20
0

suppose you have three divs within a parent section like this:

<section class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</section>

And on your CSS you have styles for those divs with class name "child":

.parent .child{
    border:0;
}

You can give particular properties to the first div like this:

.parent .child:first-child{
    border: 1px solid #000000;
}

Or select child what you want:

.parent .child:nth-child(3){
    border:1px solid #ffffff;
}
b3lg1c4
  • 76
  • 1
  • 4
0

if i understand it correct you just want to difference the first element. I think that solution can be use pseudo class first-of-type

HTML

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>

CSS

.item {
  color: red;
  font-size: 32px;
}

.item:first-of-type {
  color: blue
}

https://codepen.io/smil3cz/pen/GRjYyyL

Jan Melicherík
  • 1