Comparing and contrasting: Grid, Margin, Flex, Float

HTML & CSS
103

The first method that you posted about used .wrape .nav li:nth-of-type(8) a{ for the CSS selector.

The second method that you posted about used .wrape .nav a:nth-of-type(8) { which is preferable as it makes less assumptions about the structure of the code.

104

I can also attach class names to them if want.

<a class="ap"> Audio Player</a>

.wrape .nav a.ap {
  opacity: 0;
  border: none;
  background: none;
}

<a> Audio Player</a>

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

No difference really between the two.

105

Yes there is. With the classname you are saying that the specific element that the classname is on is the element that you want to affect.

Without the classname when you use nth-of-type, you are saying that anything that is the 8th [edit: matching] element, no matter what that element happens to be, is what you want to affect.

As none of the other links are what you want to affect, using a classname is a more appropriate way to target that one link that you donā€™t want to show.

1 Like
106

Thatā€™s is incorrect.

nth-of-type implies just what itā€™s name says , the nth element of this type

a:nth-of-type(8) says to target the 8th anchor,

It is not saying target the 8th element, ā€˜no matter what that element happens to beā€™

Sounds like you are confusing :nth-of-type with :nth-child

1 Like
107

Thanks Ray, I was intending to say the 8th matching element, and didnā€™t rule out the nth-child aspect well enough in that phrasing.

1 Like
108

Sounds like youā€™ve got it sorted out now.

The links below provide more clarification and some good examples for those that may be interested.

:nth-of-type()
:nth-child()

The pseudo selectors also work without having an element concatenated to it, they can work as descendant selectors too.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test Page</title>
<style>
div {background:yellow}

div :nth-child(2){
   background:red;
}

div :nth-of-type(2){
   background:lime;
}
</style>

</head>
<body>

<div>
   <p>paragraph text</p>
   <h2>H2 heading</h2>
   <p>paragraph text</p>
   <p>paragraph text</p>
</div>

<div>
   <h2>H2 heading</h2>
   <p>paragraph text</p>
   <p>paragraph text</p>
   <p>paragraph text</p>
</div>

</body>
</html>
109

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