CSS classes definitions-CodePudding

Haven't done any css for almost 15 years now and things do have changed a bit. I was looking into the code bellow and I can't seem to make sense of some of the things

This is is original markup.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pseudo Classes & Pseudo Elements</title>
    <link rel="stylesheet" href="style.css">
    <style>

        .dropdown-content a {
            display: none;
        }

        .dropdown:hover .dropdown-content a {
            display: block;
        }

    </style>
</head>
<body>
    
    <div >
        <a href="#">Items</a>
        <div >
            <a href="#">item 1</a>
            <a href="#">item 2</a>
            <a href="#">item 3</a>
        </div>
    </div>

</body>
</html>

So,

Why affect all the 'a' here if it does not produce any effect on the outer 'a'?

        .dropdown:hover .dropdown-content a {
            display: block;
        }

I can also seem to achieve the same result if I use just this:

    /* .dropdown-content a {
        display: none;
    }

    .dropdown:hover .dropdown-content a {
        display: block;
    } */

    .dropdown-content {
            display: none;
        }

        .dropdown:hover .dropdown-content{
            display: grid;
        }

Is there any problems with it?

I also can't seem to understand why this does not show the 3 links at all, I don't understand the why not setting the display property of the 'a' items would stop all the other 'a' from showing up.

    .dropdown-content {
            display: none;
        }

        .dropdown:hover .dropdown-content a{
            display: block;
        }

Happy New Year.

CodePudding user response：

You can't see the 'a'-elements, because you have set display: none; to it.
In the original markup

.dropdown:hover .dropdown-content a {
    display: block;
}

makes that when you hover above .dropdown the 'a's are set to display: block; and shown.

CodePudding user response：

Why affect all the 'a' here if it does not produce any effect on the outer 'a'?
  .dropdown:hover .dropdown-content a {
      display: block;
 }

There is no effect on outer a tag as intended. Because the style is being applied to only those a tags which are inside an element with dropdown-content which is in turn inside an element having class dropdown in hover state.

It is according to css combinators : refer CSS/Building_blocks/Selectors/Combinators#descendant_combinator

.dropdown-content {
       display: none;
  }

  .dropdown:hover .dropdown-content{
     display: grid;
}

Is there any problems with it?

since there are no elements other than a inside dropdown-content, hiding all the elements inside that container or hiding that container itself feels same.

I also can't seem to understand why this does not show the 3 links at all, I don't understand the why not setting the display property of the 'a' items would stop all the other 'a' from showing up.
 .dropdown-content {
       display: none;
 }

  .dropdown:hover .dropdown-content a{
     display: block;
}

This is only changing the display property of the children i.e anchor tags, but the container dropdown-content has still display:none (even in hover state of dropdown). So anchor tags will not be shown unless the display property of their container dropdown-content is changed to proper value other than none.