Question 171382 in Html Question posted in
Some basic documentation can be found here.

Can I assign a single class to all elements or sections?

I need to set all of the ‘a’ elements in a ‘div’ element as one class. Is there a way to do this using the ‘div’ element, some other element, or possibly CSS, or no? I am fairly new to HTML.

<ol id='list'><div class="column"><base class="animals">
    <li><a href=""><p>yes</p></a></li>
    <li><a href=""><p>yeah</p></a></li>
    </base>
    </div>
</ol>

My first thought was to use the base element but nothing really carried over.

I’m trying to make a search bar mechanism and I need all a elements to be as one class to comply with the JS:

function search_animal() {
  let input = document.getElementById('searchbar').value;
  input = input.toLowerCase();
  let x = document.getElementsByClassName('animals');
  for (i = 0; i < x.length; i++) {
    if (!x[i].innerHTML.toLowerCase().includes(input)) {
      x[i].style.display = "none";
    } else {
      x[i].style.display = "list-item";
    }
  }
}
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    JS Example:

    `function search_animal() {
  let input = document.getElementById('searchbar').value
  input = input.toLowerCase();
  let links = document.querySelectorAll('#list li');
  
  links.forEach((e) => {
    e.classList.toggle("active",e.innerText.toLowerCase().includes(input))
  });
}

let searchbar = document.querySelector("#searchbar");
searchbar.addEventListener("input",search_animal);`

    Instead of trying to set the element as one class directly, find the parent element and get what it includes (the initial element you were trying to set as a class), then modify the parent element primarily using JS.


  2. 0

    First, OL/UL are allowed LI as children, not base/div etc. And base shouldn’t be used like that too.

    I updated your HTML so it is correct, I also removed the p tags as they are meant to be used for paragraph text.

    for referencing all of the anchor tags via CSS, you can use #list a as the space automatically references matching "children".

    UPDATE
    With the new information, I updated my answer to include an improved javascript search function.

    You can loop through elements from querySelectorAll and pass selectors without needing a specific class.

    I also updated the javascript to toggle an active class to hide/show the results.

    function search_animal() {
  let input = document.getElementById('searchbar').value
  input = input.toLowerCase();
  let links = document.querySelectorAll('#list li');
  
  links.forEach((e) => {
    e.classList.toggle("active",e.innerText.toLowerCase().includes(input))
  });
}

let searchbar = document.querySelector("#searchbar");
searchbar.addEventListener("input",search_animal);
    li{
  display:none;
}

li.active{
  display:list-item;
}
    <input placeholder="Enter in search text here" id="searchbar">
<div class="column">
  <ol id='list'>
    <li>
      <a href="">
        yes
      </a>
    </li>
    <li>
      <a href="">
        yeah
      </a>
    </li>
  </ol>
</div>
    Login or Signup to reply.
  3. 0

    To set the class of an <a> element, simply add class="your_class" to your <a> element. I would also suggest removing the <p> element from your <a> element.

    <a href="" class="your_class">yes</a>

    Additionally, the <base> element is not a correct element. I would change that to a <div>.

    <ol id="list">
    <div class="column">
        <div class="animals">
            <li><a class="your_class" href="">yes</a></li>
            <li><a class="your_class" href="">yeah</a></li>
        </div>
    </div>
</ol>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search