CODEWITHSUNDEEP
csstagsselector
Kousha
Kousha

Reputation: 36219

CSS :selector doesn't work with different tags?

Say I have

<div class="myClass">
   <div class="child"></div>
   <span class="child"></span>
   <a class="child"></a>
</div>

If I use

.child:first-of-type { /* Code here */ }

Then all three tags get the CSS code since they are all of different types. Is there a way of still using this selector but with different tags?

Upvotes: 2

Views: 116

Answers (3)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

demo

first-of-type selects as its type but you have defined every child with different types. In the demo I have provided there are two more div (of-type) added in which first div is being selected and another (of-type) is span which is only one so it is selecting if you add more span then it doesn't select other span.

In your case, if you want to select only first then apply :first-child

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

Example taken from MDN provide the source above

div :first-of-type {
  /*background-color: lime;*/
  font-weight: bold;
}


<div>
  <span>This span is first!</span>
  <span>This span is not. :(</span>
  <span>what about this <em>nested element</em>?</span>
  <strike>This is another type</strike>
  <span>Sadly, this one is not...</span>
</div>

Result:

This span is first! This span is not. :( what about this nested element? This is another type Sadly, this one is not...

Upvotes: 0

daniel__
daniel__

Reputation: 11845

From docs:

Pseudo-class :first-of-type

The :first-of-type pseudo-class represents an element that is the first sibling of its type in the list of children of its parent element. Same as :nth-of-type(1).

Syntax

selector:first-of-type{ properties }

Upvotes: 0

Musa
Musa

Reputation: 97672

Just add the tag to the selector, e.g.

div.child:first-of-type { /* Code here */ }

Upvotes: 3

Related Questions