Problem with :visited on class. Why does a:visited work fine, and .myarticle:visited not?

<!-- Style of myarticle-->
.myarticle{
    width: 300px;
    padding: 10px;
    margin: 2px 5px 0px 0px;
    border: 1px solid black;
    background-color: bisque;
    text-align: center;
    display: flex;
    flex-direction: column;
    background-color: graY;
}

a:link{
    color: silver;
}
 <!--The thing, I don't understand. .myarticle:visited does nothing, ??-->
a:visited, .myarticle:visited{
    background-color: white;
    border-radius: 20px;
    color: black;
}
.myarticle:hover{
    width: 300px;
    padding: 10px;
    margin: 2px 5px 0px 0px;
    border: 1px solid #67B9B3;
    background-color: #224341;
}

a{
    text-decoration: none;
}

  
.myarticle:active{
    width: 300px;
    padding: 10px;
    margin: 2px 5px 0px 0px;
    border: 1px solid #67B9B3;
    background-color: #224341;
}
 <!-- main -->
.mymain{
    width: 70%;
    padding: 5px;
    height: 350px;
    background-color: sienna;
    border: 2px solid peru;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
 <!-- Footer -->
.headfoot{
    width: 70%;
    padding: 5px;
    border: 2px solid peru;
    background-color: sandybrown;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
       
        <meta charset="utf-8">
        <link rel="stylesheet" href="Green.css">
        <title>Cyan</title>
    </head>
    <body>    
        <header class="headfoot">Kopfzeile</header>
            <main class="mymain">
                   <!--Hyperlink reference (a)-->
                    <a href="index.html">
                     <!-- first article -->
                    <article class="myarticle article01">
                            <h1>Artikel (1)</h1>
                            <p>Lorem ipsum dolor...</p>
                    <a href="index.html">
                    <!-- second article -->
                    <article class="myarticle article02 unten">
                        <h1>Artikel (2)</h1>
                        <p>Lorem ipsum dolor...</p>
                    </article></a>
                    <a href="https://www.youtube.com/watch?v=IumYMCllMs" >
                      <!-- third article -->
                    <article class="myarticle article03">
                        <h1>Artikel (3)</h1>
                        <p>Lorem ipsum dolor...</p>
                    </article><a/>
            </main>
        <footer class="headfoot">
        Fußzeile
        </footer>
    </body>
</html>

i don't know, why it's not working. Could someone explain me where's my fault? Why is .myarticle:visited not working fine?:(

[I'm trying to change the style of myarticle if the link of a is visited. But I'm a little bit frustrated actually. I don't know wheres my fault at. what are the rules for ':visited' is it caused of the wrong usage? How do i write it then?]

Solution

since .myarticle cannot be "visited", I would go with:

a:visited, a:visited > .myarticle{
    background-color: red;
    border-radius: 20px;
    color: black;
}

Instead of:

<!--The thing, I don't understand. .myarticle:visited does nothing, ??-->
a:visited, .myarticle:visited{
    background-color: white;
    border-radius: 20px;
    color: black;
}

:visited status applies to the links, you cannot apply this to the article items