Appliquer css à li sur clic sans jquery ou javascript

Question

Voici mon code HTML

        Accueil
        Utilisateurs
        Gérer les projets
        Transactions
        Déconnexion

Voici mon CSS

#menus li
{
    float:left;
    list-style-type: none;
    padding-left: 25px;
    padding-right: 25px;
    border-right:groove 1px #FFFFFF;
    background: #666666;
}

#menus li:hover
{
    background: #999999;
}

#menus li a
{
    font-size:24px;
    text-decoration:none;
    color:#FFFFFF;
}

#menus li a:hover
{
    color:#000000;
}

Maintenant je veux changer le CSS lorsque l'utilisateur clique sur un élément li (comme afficher la sélection en cours). Puis-je le faire en utilisant uniquement du CSS ?? Si oui, comment ??

Merci d'avance..

Answer 1

Vous pouvez le faire avec CSS seulement en utilisant focus et tabindex

DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/4/

li:focus  {
  background: red;
  outline: 0;
}

Une bonne façon d'implémenter une solution d'élément de menu 'actif' est la suivante

DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/6/

Source: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/

Answer 2

Non, vous ne pouvez pas faire cela avec juste css. Je ne suis pas trop sûr de quoi dire...

Si vous voulez avoir un actif spécifique à la page, placez une classe différente dans le backend, par exemple: