CSS difficulty - What the CSS?

HTML-CSS
1

Hello Freecodecampers!

I’m new to coding. Just starting to learn using FCC.
It’s quite a bumpy road. Sometimes things work out fine, other times, I’m getting nothing done…

At the moment, I have a little difficulty with a project I saw on https://codepen.io.

This is de pen : https://codepen.io/incrediblecast/pen/aboPwxv
It’s made by Casthra Demosthene (*shoutout)

In the CSS code, you’ll see this :
(I attached a picture)

#flip div:first-child {
  animation: show 5s linear infinite;
}

#flip div div {
  background:#203a43;
}
#flip div:first-child div {
  background:#3c3b3f;
}
#flip div:last-child div {
  background:#0f2027;
}

Why not define #flip in one #-tag?
Why this structure?

Can someone explain it to me?
Thank you in advance

Best regards

51
511198×681 52.8 KB

2

Given your question, it is difficult to give you a comprehensive answer however in brief, there are many selectors because they are targeting different elements. To learn about the different type of selectors in CSS i suggest you read more about combinators here and then here about pseudo-classes.

Cheers,
Nibble

1 Like
3

Thank you Nibble, much appreciated!

4

I think the document structure and selectors are a bit confusing. I’d also suggest animating the translate and not margin.

Here is a refactored version, just because I had nothing better to do.
https://codepen.io/lasjorg/pen/bGbOLBV

1 Like
5

“I think the document structure and selectors are confusing” Yes, you’re absolutely right about that. I have not grasped the nitty gritty of the topic myself. It’s recommended you use those selectors if you must. Otherwise keep things simple with the usual element, class and id selectors. I’m using a mobile phone so wasn’t really able to see your pen.

1 Like
6

I don’t really have an issue with the use of the pseudo-classes, although I would prefer the use of :nth-child for the color selectors. Sometimes they can be handy, like excluding the last element.

.card:not(:last-child) {
  margin-right: 20px;
}

I’m not even sure the selector #flip div:first-child is actually selecting the expected elements. It does work but if you look at what it is actually selecting it isn’t clear to me that was the intent.

#flip div:first-child {
  color: red;
}

<div id=container>
  <div id=flip>
    <div>
      wrapper <!-- red -->
      <div>Apple</div> <!-- red -->
    </div>
    <div>
      wrapper
      <div>Aligator</div> <!-- red -->
    </div>
    <div>
      wrapper
      <div>Airplane</div> <!-- red -->
    </div>
  </div>
</div>

Anyway, the HTML and selectors are just a bit messy and hard to follow.

1 Like
7

Thanks for you’re input! Much appreciated!

Just a small remark :
You said : “Here is a refactored version, just because I had nothing better to do.”
That’s one way to look at it.
Life is all about perspective.
I see it like this : You saw the project and thought you could do better. And so you did.
Has nothing to do with having ‘nothing better to do’. It’s being a perfectionist.
And having the urge to prove you can do a better job. That’s something to be proud of!
(And I’m glad you did. Made me learn something. :slight_smile: )

Best regards!