Targeting an anchor tag

HTML & CSS
21

The following code has been removed:

/*
.nav a:nth-of-type(5n) {
  margin-right: 0;
}

.nav a:nth-of-type(8) {
  opacity: 0;
  border: none;
  background: none;
}

.nav a:nth-of-type(15) {
  position: relative;
  border: 3px solid #0059dd;
  background: none;
}
*/

Which means adding position: relative on to the links:

.nav a {
  position: relative;
  ...
}

The boxes currently have all the margin on their right and bottom. Let’s spread that around evenly on the boxes:

.nav a {
  ...
  /*margin: 0 4px 12px 0;*/
  margin: 6px, 2px;
  ...
}

That adds too much margin on the outside of the nav container, so we can subtract that extra amount from the nav container.

.nav {
  margin: -6px 2px;
}

And it’s all done, just like that. Magic eh? https://jsfiddle.net/r8v3m1k1/11/

1 Like
22

You could repeat the width five times with:

  grid-template-columns: 50px 50px 50px 50px 50px;

but there’s a repeat command designed for that as well:

  grid-template-columns: repeat(5, 50px);
1 Like
23

How would I add a gap between them?

24

Got it:

25

50px is too big for them. Instead, make the wrapper 266px wide, and tell it to auto-fit (with 1fr)

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 6px;
  width: 266px;
  background-color: #fff;
  color: #444;
}

The fr means Fractional Unit, so CSS just divides the grid into 5 equal columns.

26

I did it:

27

Now, I just need to turn them into links.

28

The grid just fell apart after making them links.

29

I’ll start back from this then:

How would I turn them into links?

30

Start from links, and then take things forward from there.

31

It’s no longer a grid after it becomes links:

32

That’s what happens when you delete all of the grid commands in the wrapper section.

33

I got something going.

34

Like this?

35

Yes, that’s an improvement.

1 Like
36

Technically, isn’t it this?

50px 50px 50px 50px 0;

Not this?

50px 50px 50px 50px 50px
https://jsfiddle.net/r8v3m1k1/85/;

or am I wrong, and how would I be wrong?

37

Both work, but the second one is more appropriate as that one more closely represents your intention.

1 Like
38

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