Html - How can I select elements based on an attribute of a child of a parent element's previous sibling?

SanjuR
May 2, 2024
159 views
0 votes
2 Answers

Is there way I can hide the 2nd and 3rd anchor elements inside the li elements using CSS? Also, it needs to be hidden based on the attribute selector "isInternalUser=true" which is there in the first anchor element. I know it can be achieved using the JavaScript but the framework I’m using there only CSS is supported hence would like to know if it’s feasible to hide it 2nd and 3rd element using the attribute selector.

.nav>li>[href*="isInternalUser=true"]+a,
.nav>li>[href*="isInternalUser=true"]+a+a {
  display: none;
}

<ul class="nav nav-pills">
  <li><a href="https://www.sapsfdemojobs.com/?isInternalUser=true" title="Home Page">Home Page</a></li>
  <li><a href="https://www.sapsfdemojobs.com/careers" title="CMC Careers" target="_blank">CMC Careers</a></li>
  <li><a href="https://www.sapsfdemojobs.com/home" title="Veterans" target="_blank">Veterans</a></li>
  <li class="dropdown"><a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false" title="Find a Job" aria-controls="header1top3"> Find a Job <b class="caret"></b> </a>
    <ul class="dropdown-menu company-dropdown headerdropdown" id="header1top3">
      <li><a title="View All Jobs">View All Jobs</a></li>
      <li><a href="https://sapsfdemojobs.com/content/CMC-Steel-Arizona-2nd-Micro-Mill/?locale=en_US&amp;isInternalUser=true" title="Opportunities in Arizona">Opportunities in Arizona</a></li>
      <li><a title="Business Support Jobs">Business Support</a></li>
      <li><a href="https://sapsfdemojobs.com/content/Core-Career-Path/?locale=en_US&amp;isInternalUser=true" title="Core Career Path">Core Career Path</a></li>
      <li><a title="Drivers Jobs">Drivers</a></li>
      <li><a title="Maintenance Jobs">Maintenance</a></li>
      <li><a title="Operations Jobs">Operations</a></li>
      <li><a title="Sales Jobs">Sales</a></li>
      <li><a title="Students">Sudents </a></li>
      <li><a title="Technology Jobs">Technology</a></li>
    </ul>
  </li>
</ul>

Answers

You can use attribute selectors in CSS as described at https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors.

Your selectors

.nav > li > [href*="isInternalUser=true"] + a,
.nav > li > [href*="isInternalUser=true"] + a + a {
  display: none;
}

are wrong because the href attribute is ON the ‘a’ tag, and the ‘+ a’ you put here does something different.

li:has(>a[href="https://www.sapsfdemojobs.com/careers"]),
li:has(>a[href="https://www.sapsfdemojobs.com/home"]),
li:has(>a[href*="isInternalUser=true"]) {
  display: none
}

<html>

<head>
</head>

<body>
  <ul class="nav nav-pills">
    <li><a href="https://www.sapsfdemojobs.com/?isInternalUser=true" title="Home Page">Home Page</a></li>
    <li><a href="https://www.sapsfdemojobs.com/careers" title="CMC Careers" target="_blank">CMC Careers</a></li>
    <li><a href="https://www.sapsfdemojobs.com/home" title="Veterans" target="_blank">Veterans</a></li>
    <li class="dropdown"><a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false" title="Find a Job" aria-controls="header1top3"> Find a Job <b class="caret"></b> </a>
      <ul class="dropdown-menu company-dropdown headerdropdown" id="header1top3">
        <li><a title="View All Jobs">View All Jobs</a></li>
        <li><a href="https://sapsfdemojobs.com/content/CMC-Steel-Arizona-2nd-Micro-Mill/?locale=en_US&amp;isInternalUser=true" title="Opportunities in Arizona">Opportunities in Arizona</a></li>
        <li><a title="Business Support Jobs">Business Support</a></li>
        <li><a href="https://sapsfdemojobs.com/content/Core-Career-Path/?locale=en_US&amp;isInternalUser=true" title="Core Career Path">Core Career Path</a></li>
        <li><a title="Drivers Jobs">Drivers</a></li>
        <li><a title="Maintenance Jobs">Maintenance</a></li>
        <li><a title="Operations Jobs">Operations</a></li>
        <li><a title="Sales Jobs">Sales</a></li>
        <li><a title="Students">Sudents </a></li>
        <li><a title="Technology Jobs">Technology</a></li>
      </ul>
    </li>
  </ul>
</body>

</html>

Here are some very specific solutions which may not accommodate all possible menu configurations.

The first selects list item elements not containing children having the dropdown-toggle class which are inside subsequent siblings of list items having children with the href attribute value specified.

Alternatively, select in a similar manner but by list item index using nth-child.

Note that I’m selecting list items instead of anchors, as that’s what should really be hidden. Empty list items may appear ugly and are an accessibility concern. If that’s a problem you can easily add > a as appropriate to specify the anchors.

.nav > li:has([href*="isInternalUser=true"]) ~ li:not(:has(a.dropdown-toggle)) {
  color: orange;
}

.nav-alt > li:has([href*="isInternalUser=true"]) ~ li:nth-child(2),
.nav-alt > li:has([href*="isInternalUser=true"]) ~ li:nth-child(3) {
  color: magenta;
}

<ul class="nav nav-pills">
  <li><a href="https://www.sapsfdemojobs.com/?isInternalUser=true" title="Home Page">Home Page</a></li>
  <li><a href="https://www.sapsfdemojobs.com/careers" title="CMC Careers" target="_blank">CMC Careers</a></li>
  <li><a href="https://www.sapsfdemojobs.com/home" title="Veterans" target="_blank">Veterans</a></li>
  <li class="dropdown"><a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false" title="Find a Job" aria-controls="header1top3"> Find a Job <b class="caret"></b> </a>
    <ul class="dropdown-menu company-dropdown headerdropdown" id="header1top3">
      <li><a title="View All Jobs">View All Jobs</a></li>
      <li><a href="https://sapsfdemojobs.com/content/CMC-Steel-Arizona-2nd-Micro-Mill/?locale=en_US&amp;isInternalUser=true" title="Opportunities in Arizona">Opportunities in Arizona</a></li>
      <li><a title="Business Support Jobs">Business Support</a></li>
    </ul>
  </li>
</ul>

<hr>

<ul class="nav-alt nav-pills">
  <li><a href="https://www.sapsfdemojobs.com/?isInternalUser=true" title="Home Page">Home Page</a></li>
  <li><a href="https://www.sapsfdemojobs.com/careers" title="CMC Careers" target="_blank">CMC Careers</a></li>
  <li><a href="https://www.sapsfdemojobs.com/home" title="Veterans" target="_blank">Veterans</a></li>
  <li class="dropdown"><a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false" title="Find a Job" aria-controls="header1top3"> Find a Job <b class="caret"></b> </a>
    <ul class="dropdown-menu company-dropdown headerdropdown" id="header1top3">
      <li><a title="View All Jobs">View All Jobs</a></li>
      <li><a href="https://sapsfdemojobs.com/content/CMC-Steel-Arizona-2nd-Micro-Mill/?locale=en_US&amp;isInternalUser=true" title="Opportunities in Arizona">Opportunities in Arizona</a></li>
      <li><a title="Business Support Jobs">Business Support</a></li>
    </ul>
  </li>
</ul>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How can I select elements based on an attribute of a child of a parent element's previous sibling?

Answers