Removing Negative Margin

What would the coordinates be for the middle block?

Example:

  .links a:nth-of-type(5n) {

  }

Iā€™m not sure what you mean. If youā€™re asking how to target it with nth-of-type (which has nothing to do with coordinates), then Iā€™m sure you can count links as well as the next person and work out which number that is.

I donā€™t think I would target it that way, though. Iā€™d add a class to that link - say ā€œplaybuttonā€ - and use the class to style it differently. It would make it easier for me (and anybody else working on my code after me) to see at a glance what those rules are targeting.

2 Likes

If you mean the 8th block in sequence then as technoBear said Iā€™m sure you can work out what number to use once youā€™ve reviewed the details of nth-of-type :slight_smile:

You canā€™t remove that item because the other items will just re-align. If you want to hide it but keep the space open then just set it to visibility:hidden or opacity:0

1 Like

Letā€™s start with the 1st top left square, that would be called?

nth-of-type 1st row top left.

1 Like

If you look at the link I gave you above to the Codrops explanation of nth-of-type, it links to an online tester where you can play about with all these settings and discover them for yourself.

Practice is by far the best way to learn.

2 Likes

probably because the resolution XD

T[quote=ā€œasasass, post:145, topic:281421ā€]
Letā€™s start with the 1st
[/quote]

If Iā€™m not mistaken that would be number 1.

(1)

See if you can make that work with the information already provided?

2 Likes

Iā€™ll start by trying to change the color of one.

Found it.
http://www.topdesignagencies.com/nth-test/

    .linkse a:nth-of-type(1n+2) {
    background-color:green;
  }

This makes 14 boxes green, How would I do only the top left one?

I still donā€™t understand.

This is 1:

I got it.

    .linkse a:nth-child(-n+1) {
    background-color:green;
  }

That would be called (1) as already mentioned.

What are you talking about? I gave you the biggest clue in the world.

The first one is this:

   .linkse a:nth-of-type(1) {
    background-color:yellow;
  }
2 Likes

Whatā€™s the difference??


    .linkse a:nth-child(-n+1) {
    background-color:green;
  }

   .linkse a:nth-of-type(1) {
    background-color:yellow;
  }

Both select the same thing, but one is unnecessarily overcomplicated, the other is nice and simple.
Given that, which would you consider best?

2 Likes
  .linkse a:nth-of-type(1) {
    background-color:yellow;
  }
1 Like

This should illustrate the difference and where you may use (-n+#)

Look at the CSS selectors.
The first two list use selectors like your two, selecting just the first (number one) child. Both have the same effect.
The third one selects everything up to the third child.
The fourth one selects everything up to the sixth child.
The fifth, final one selects only the sixth child.
The last two illustrate the difference between (-n+6) and (6).
If using 1 there is no need for -n+

2 Likes

Umm, is ā€œ.linkseā€ a typo? It looks like itā€™s meant to be a unique id (the e part) used once instead of a class that can be used more than once.

no, not really. I had multiple players, so I wanted an easy way to differentiate them from each other, I couldā€™ve used numbers instead.

I looked at the top of the page and thereā€™s nothing from you.

I gave you my best answer at the top of the page using floats

I was just looking through older posts and came upon this one.

I replied to post #29

Look up from that one and thereā€™s no post at all that you seem to be referencing.

Unless if it may be in a different thread.