Wie kann ich einzelne Tabellen im css code unterscheiden?

/*.navigation*/
   @media all {
      .navigation {
         background-color: #63B8FF;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
      .navigation p {
         text-align: center;
      }
      .navigation a {
         color: #FF0000;
         font-weight: bold;
      }
   }
   @media only screen and (min-width: 1000px) {
      .navigation {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(250px - 1rem - 2px - 0rem);
      }
   }

/*.navigation*/
   @media all {
      .navigation {
         background-color: #63B8FF;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
      .navigation p {
         text-align: center;
      }
      .navigation a,
      .navigation a:visited {
         display: block;
         color: #FF0000;
         font-weight: bold;
         padding: 0.3rem;
         border: 1px solid black;
         border-radius: 0.3rem;
      }
      .navigation a:hover,
      .navigation a:active,
      .navigation a:focus {
         background-color: black;
         color: gold;
      }
   }
   @media only screen and (min-width: 600px) {
      .navigation {
         display: flex;
         flex-wrap: wrap;
         align-content: flex-start;
      }
      .navigation p {
         margin: 0.25rem 0.5rem ;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(50% - 0rem - 0px - 1rem);
      }
   }
   @media only screen and (min-width: 1000px) {
      .navigation {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(250px - 1rem - 2px - 0rem);
      }
      .navigation p {
         flex-basis: calc(100% - 0rem - 0px - 1rem);
      }
   }