1

This is my html code:

<div class="role-main">
    <div class="abc">
    </div>
    <div class="bca">
    </div>
    <div class="test">
    </div>
    <div class="test">
    </div>
    <div class="test">
    </div>
</div>

And this is the css part:

.role-maine .test:first-of-type {margin-left:0px}
.role-maine .test {margin-left:30px;}

So I do I assign de margin-left:0px for the first class, which has the name "test" ?

Popnoodles
  • 28,090
  • 2
  • 45
  • 53
Attila Naghi
  • 229
  • 1
  • 8

3 Answers3

0

The selector that you are looking for seems to be :first-child, like:

.role-main .test:first-child { margin-left: 0; }

In this case and to refactor it, you could also do:

/* .role-main .test:first-of-type {margin-left:0px}
   Not needed anymore */
.role-main .test:not(:first-child) { margin-left: 30px; }

EDIT: In complement to the @Popnoodles answer, you name classes was different indeed. My code is fixed.

Alexis B.
  • 1,105
  • 8
  • 13
  • I already tried it , and does not work – Attila Naghi Aug 11 '15 at 10:48
  • 1
    That's because he has got typo in his code. He meant this code `.role-main .test:first-child { margin-left: 0; }` – Kyrbi Aug 11 '15 at 10:49
  • I updated my code. I saw that mistake, but that not was the problem.Still not working :( – Attila Naghi Aug 11 '15 at 10:51
  • @AttilaNaghi just be aware of the lack of `:not()` support in browsers, as opposed to the support of `:first-of-type`. – Popnoodles Aug 11 '15 at 10:54
  • Kyrbi thank you for your complement. As notified in my edit, @popnoodles already noticed this mistake in his post. – Alexis B. Aug 11 '15 at 10:54
  • @Popnoodles If you don't consider an IE6 spec, the support is actually the same than `first-of-type`, as a CSS3 selector. http://caniuse.com/#search=%3Anot But both answers are actually correct. – Alexis B. Aug 11 '15 at 10:57
  • I tried with not , but still not working. – Attila Naghi Aug 11 '15 at 10:59
  • Ah, I was reading the support for extended arguments. https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anot – Popnoodles Aug 11 '15 at 10:59
  • @AttilaNaghi If any of Popnoodles or my answer works, we would need more details of your code (jsFiddle) because the issue should be more complex. – Alexis B. Aug 11 '15 at 11:01
  • Again not the one to downvote but both answers are incorrect. User wants to select the first element which has the class `test`. As you can see in their code, the element which has class as `test` is neither the first child of its parent (it is the 3rd) and it is not the first of its type under the parent either (it is again the 3rd of type div). – Harry Aug 11 '15 at 12:40
0

It's not working because you have got typo in your code. Your div has got in html class role-main but in CSS you call it .role-maine.

Kyrbi
  • 2,212
  • 7
  • 25
  • 42
-2

only JS solution will help you here.

var el = document.getElementsByClassName('test')[0];
el.style.marginLeft = "0px";

http://jsfiddle.net/z0jbpnaq/

this might be helpful to you all - CSS select first element with a certain class

Community
  • 1
  • 1
Rohit Kumar
  • 2,048
  • 1
  • 14
  • 28