0

When we have this part of code: 

<div *ngFor="element of elements1" class="element"></div>
<div *ngFor="element of elements2" class="element"></div>

And class Element:

.element {
color:red;
}
.element:first-of-type {
color:blue;
}

And we have two cases:

  • The first one is when the class element is global. In this case just the first element of elements1 will be blue

  • The second one is when the class "element" is local. In this case fist elements of both of the arrays will be blue

Why behavior in both cases isn't the same?

Jens Habegger
  • 5,266
  • 41
  • 57
Dmytro
  • 48
  • 6

3 Answers3

0

first-of-type will get the element type using the class, so for example if the class is assigned on a p then the p should be the first of it's type to work so if there is any other p even from another class it will not detect it. 

p:first-of-type {color:blue}
.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}
<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

check this also:

CSS3 selector :first-of-type with class name?

Basil
  • 1,613
  • 12
  • 25
  • Yes, you can use first-of-type with classes: https://codepen.io/adripanico/pen/oNgEMOO – adripanico Jan 08 '20 at 10:55
  • then why the snippet in my answer is not working? – Basil Jan 08 '20 at 10:59
  • 1
    It's working, the problem is that the type in this case is a paragraph and once it matches the first paragraph, the other rules are not applicable. See this other snippet in which I'm mixing paragraphs and spans: https://codepen.io/adripanico/pen/ZEYrMJq – adripanico Jan 08 '20 at 11:27
  • 1
    Thanks that was good to know i'll change my answer – Basil Jan 08 '20 at 11:30
  • but still it uses the class only to get the type and then to select the first of that type. – Basil Jan 08 '20 at 11:33
  • Exactly. The pseudo-selector applies only to element level. But you can define it using classes and the resulting CSS is correct. – adripanico Jan 08 '20 at 11:34
  • so can you remove the downvote :) – Basil Jan 08 '20 at 11:34
  • This kind of discussions helps a lot and I'm not defensive I accept other opinion if it's correct – Basil Jan 08 '20 at 11:36
0

Try this:

<div 
  *ngFor="element of elements1; let first = first;" 
  class="element" 
  [ngStyle]="first && {'color': 'blue'}">
</div>

This will set the color only for the first div.

Ramesh Reddy
  • 10,159
  • 3
  • 17
  • 32
  • I don't need another implementation. I want to understand the behavior. – Dmytro Jan 08 '20 at 11:17
  • @Student Okay, Quentin's answer explains the reason. If you have further issues replicate your issue in a stackBlitz or something similar. – Ramesh Reddy Jan 08 '20 at 11:36
0

:first-of-type means "first of type" and not "first that matches the previous bit of the selector".

The class is irrelevent. The element type is div.

.element {
  color: red;
}

.element:first-of-type {
  color: blue;
}
<section>
  <div class="element">This is the first div in the section</div>
  <div class="element">
      This is the second div in the section
      <div class="element">This is the first div in the div</div>
      <div class="element">This is the second div in the div</div>
  </div>
  <p class="element">This is the first p in the section</p>
  <p class="element">This is the second p in the section</p>
</section>
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Ok, I understand this, but why second case working with another behavior? – Dmytro Jan 08 '20 at 11:13
  • @Student — The differences between your two cases are unclear. You should provide a [mcve] that shows the HTML (and not the Angular template). – Quentin Jan 08 '20 at 11:24