How to select a class inside a class CSS-CodePudding

I am facing a problem. I am new at CSS. I pasted the code below.

There are 2 options:

I want to select the Join Class.
this is a WordPress website. I want to style the join Course text. but if I select .jclass, it's not for text. It's a div. on the other hand, if I select menu-item-wrap then both are selected. So how can I select the menu-item-wrap under the jclass?

<div id="page-navigation" >
  <nav id="menu" >
    <ul id="menu-primary"  
        data-smartmenus-id="16650233980002595">
      <li >
         <a href="#" onclick="return true">
           <div >
             <span >
               Join Class
             </span>
           </div>
         </a>
       </li>
       <li >
         <a href="http://techgeneration.org/courses/"
            onclick="return true">
           <div >
             <span >
               Courses
             </span>
           </div>
         </a>
       </li>
     </ul>
   </nav>
</div>

CodePudding user response：

You can have a structure like this:

.jclass .menu-item-wrap {
     /* Your css here */
 }

You can increase its specificity if the styles gets override by any other selector like

#menu .jclass .menu-item-wrap {
    /* Your css here */
 }

CodePudding user response：

this way :

li.jclass span {
  color : red;
  }

<div id="page-navigation" >
  <nav id="menu" >
    <ul id="menu-primary"  
        data-smartmenus-id="16650233980002595">
      <li >
         <a href="#" onclick="return true">
           <div >
             <span >
               Join Class
             </span>
           </div>
         </a>
       </li>
       <li >
         <a href="http://techgeneration.org/courses/"
            onclick="return true">
           <div >
             <span >
               Courses
             </span>
           </div>
         </a>
       </li>
     </ul>
   </nav>
</div>

CodePudding user response：

This way

.menu-item-wrap span {
   // your code here

}