Sun. Oct 1st, 2023

[ANSWERED] html – Same class on parent and child element for navigation “.nav-links” – Looking for best CSS solution

By

Nov 20, 2022 css, html

Solution 1 :

Just use an additional decedent selector only changing the background property:

.leftpart .nav-links .nav-links ul li a {
  background: red;
 }

.leftpart {
  width: 100%;
  display: block;
  margin: 20px;
}

.leftpart .nav-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

.leftpart .nav-links ul li {
  margin-bottom: 20px;
}

.leftpart .nav-links ul li a {
  background: green;
  color: #fff;
  padding: 20px;
  display: inline-block;
}

.leftpart .nav-links .nav-links ul li a {
  background: red;
 }

<div class="leftpart">
  <div class="nav-links">
    <h1> Primary Links </h1>
    <ul>
      <li>
        <a href="/profile.html">Profile</a>
      </li>

      <li>
        <a href="/friends.html">Friends</a>
      </li>

      <li>
        <a href="/milestone.html">Milestones</a>
      </li>

      <li>
        <a href="/groups.html">Groups</a>
      </li>
    </ul>

    <div class="sub-seciton">
      <div class="nav-links">
        <ul>
          <li>
            <a href="#">Edit</a>
          </li>

          <li>
            <a href="#">Save</a>
          </li>
        </ul>
      </div>
    </div>

  </div>

  <div class="nav-links">
    <h1> Secondary Links </h1>
    <ul>
      <li>
        <a href="/privacy.html">Privacy</a>
      </li>

      <li>
        <a href="/settings.html">Settings</a>
      </li>
    </ul>
  </div>
</div>

Solution 2 :

You need to target .nav-links inside the sub-section. You can also style your nav-links siblings separately. See my example:

.leftpart {
          width: 100%;
          display: block;
          margin: 20px;
        }

        .leftpart .nav-links ul {
          list-style: none;
          margin: 0;
          padding: 0;
          display: block;
        }

        .leftpart .nav-links ul li {
          margin-bottom:20px;
        }

        .leftpart > .nav-links ul li a {
           background:green;
           color:#fff;
           padding: 20px;
           display: inline-block;
        }

 .leftpart .nav-links .sub-seciton .nav-links  ul li a {
            background:red ;

 }

.leftpart > .nav-links:nth-child(2) ul li a {
background: blue;
}

<div class="leftpart">
        <div class="nav-links">
          <h1> Primary Links </h1>
          <ul>  
            <li>
              <a href="/profile.html">Profile</a>
            </li>

            <li>
              <a href="/friends.html">Friends</a>
            </li>

            <li>
              <a href="/milestone.html">Milestones</a>
            </li>

            <li>
              <a href="/groups.html">Groups</a>
            </li>
          </ul>

          <div class="sub-seciton">
              <div class="nav-links">
                <ul>                
                  <li>
                    <a href="#">Edit</a>
                  </li>

                  <li>
                    <a href="#">Save</a>
                  </li>
                </ul>
              </div>
          </div>
          
        </div>

        <div class="nav-links">        
          <h1> Secondary Links </h1>
          <ul>
            <li>
              <a href="/privacy.html">Privacy</a>
            </li>

            <li>
              <a href="/settings.html">Settings</a>
            </li>
          </ul>
        </div>
    </div>

Solution 3 :

Just set your CSS code more specific for it:

        .leftpart {
          width: 100%;
          display: block;
          margin: 20px;
        }

        .leftpart .nav-links ul {
          list-style: none;
          margin: 0;
          padding: 0;
          display: block;
        }

        .leftpart .nav-links ul li {
          margin-bottom:20px;
        }

        .leftpart .nav-links ul li a {
           background:green;
           color:#fff;
           padding: 20px;
           display: inline-block;
        }

        .leftpart .nav-links .sub-seciton .nav-links ul li a {
           background:red;
           color:#fff;
           padding: 20px;
           display: inline-block;
        }

<div class="leftpart">
        <div class="nav-links">
          <h1> Primary Links </h1>
          <ul>  
            <li>
              <a href="/profile.html">Profile</a>
            </li>

            <li>
              <a href="/friends.html">Friends</a>
            </li>

            <li>
              <a href="/milestone.html">Milestones</a>
            </li>

            <li>
              <a href="/groups.html">Groups</a>
            </li>
          </ul>

          <div class="sub-seciton">
              <div class="nav-links">
                <ul>                
                  <li>
                    <a href="#">Edit</a>
                  </li>

                  <li>
                    <a href="#">Save</a>
                  </li>
                </ul>
              </div>
          </div>
          
        </div>

        <div class="nav-links">        
          <h1> Secondary Links </h1>
          <ul>
            <li>
              <a href="/privacy.html">Privacy</a>
            </li>

            <li>
              <a href="/settings.html">Settings</a>
            </li>
          </ul>
        </div>
    </div>

Solution 4 :

.leftpart {
          width: 100%;
          display: block;
          margin: 20px;
        }
        
      .leftpart .sub-seciton>.nav-links ul li:nth-child(1) a,
      .leftpart .sub-seciton>.nav-links ul li:nth-child(2) a{
          background:red;
        }

        .leftpart .nav-links ul {
          list-style: none;
          margin: 0;
          padding: 0;
          display: block;
        }

        .leftpart .nav-links ul li {
          margin-bottom:20px;
        }

        .leftpart .nav-links ul li a {
           background:green;
           color:#fff;
           padding: 20px;
           display: inline-block;
        }

<div class="leftpart">
        <div class="nav-links">
          <h1> Primary Links </h1>
          <ul>  
            <li>
              <a href="/profile.html">Profile</a>
            </li>

            <li>
              <a href="/friends.html">Friends</a>
            </li>

            <li>
              <a href="/milestone.html">Milestones</a>
            </li>

            <li>
              <a href="/groups.html">Groups</a>
            </li>
          </ul>

          <div class="sub-seciton">
              <div class="nav-links">
                <ul>                
                  <li>
                    <a href="#">Edit</a>
                  </li>

                  <li>
                    <a href="#">Save</a>
                  </li>
                </ul>
              </div>
          </div>
          
        </div>

        <div class="nav-links">        
          <h1> Secondary Links </h1>
          <ul>
            <li>
              <a href="/privacy.html">Privacy</a>
            </li>

            <li>
              <a href="/settings.html">Settings</a>
            </li>
          </ul>
        </div>
    </div>

Problem :

I have to create left section for a website “.leftpart” in which I have parent navigation class “.nav-links” with CSS properties. I have also have same class “.nav-links” as a sub section under parent “.nav-links”. I want to give a different background color “red” to child “.nav-links” [Edit and Save]. Can you anyone suggest best way to do this ?

My code is below, thanks in advance :

.leftpart {
          width: 100%;
          display: block;
          margin: 20px;
        }

        .leftpart .nav-links ul {
          list-style: none;
          margin: 0;
          padding: 0;
          display: block;
        }

        .leftpart .nav-links ul li {
          margin-bottom:20px;
        }

        .leftpart .nav-links ul li a {
           background:green;
           color:#fff;
           padding: 20px;
           display: inline-block;
        }

<div class="leftpart">
        <div class="nav-links">
          <h1> Primary Links </h1>
          <ul>  
            <li>
              <a href="/profile.html">Profile</a>
            </li>

            <li>
              <a href="/friends.html">Friends</a>
            </li>

            <li>
              <a href="/milestone.html">Milestones</a>
            </li>

            <li>
              <a href="/groups.html">Groups</a>
            </li>
          </ul>

          <div class="sub-seciton">
              <div class="nav-links">
                <ul>                
                  <li>
                    <a href="#">Edit</a>
                  </li>

                  <li>
                    <a href="#">Save</a>
                  </li>
                </ul>
              </div>
          </div>
          
        </div>

        <div class="nav-links">        
          <h1> Secondary Links </h1>
          <ul>
            <li>
              <a href="/privacy.html">Privacy</a>
            </li>

            <li>
              <a href="/settings.html">Settings</a>
            </li>
          </ul>
        </div>
    </div>

Comments

Comment posted by waqas Mumtaz

[ .leftpart > .nav-links:nth-child(2) ul li a ] is OPTIONAL. I added it just for your understanding.

By

Related Post

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

Nov 20, 2022

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022