English version of this class?

HTML & CSS
1

.row.uniform > * > :first-child {margin-top: }
Selects all row elements with the class uniform, that is the first child of its parent?
Is that the correct ‘translation’?

2

No, .row.uniform is the parent. Actually grandparent in this case.

It selects the first child that is the grand child of an element with both .row and .uniform classes.

.row.uniform = element with both classes.
> = descendant of…
* = any element.
> = descendant of…
:first-child

<div class="row uniform"> <!-- Both classes -->
   <div>    <!-- any element -->
      <p>First</p>   <!-- first child. This! -->
      <p>Second</p>
   </div>
</div>
3 Likes
3

… that is the first child of a parent that is a direct child of .uniform.

The element selected is a grandchild of .uniform.

[edit]
Sam explained it better :slight_smile:

1 Like
4

There is also this site which helps with understanding: https://hugogiraudel.github.io/selectors-explained/

In your case this yields:

An element provided it is the first child of its parent
… directly within an element
… itself directly within an element with classes row and uniform.

3 Likes
5

All that being said… ugh is that an ugly selector. Css reads from right to left so… what that means is that little selector is saying “okay find me the first child that is a direct descendant of … EVERYTHING… THEN find EVERYTHING that is a direct descendant of anything with a class of row and uniform.”
Wildcard selectors should be used sparingly and NOT in this case.

4 Likes
6

I have done a complete no no probably by basing my webpage on a very complicated template and trying to teach myself CSS and HTML at the same time. I sure do appreciate you all. If anyone reading this knows of a source for a well constructed template I would sure appreciate a pointer to it!

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.