code is like this

<div class="linkPillar">
  <a href="github"><img src="github.png" alt="GitHub"></a>
  <a href="facebook"><img src="fb.png" alt="facebook"></a>
</div>

and i want to select all a's just inside of linkPillar without giving each of them an id. is there any way to make this, thanks

code is like this

<div class="linkPillar">
  <a href="github"><img src="github.png" alt="GitHub"></a>
  <a href="facebook"><img src="fb.png" alt="facebook"></a>
</div>

and i want to select all a's just inside of linkPillar without giving each of them an id. is there any way to make this, thanks

• javascript
• css

Share Improve this question Follow edited May 30, 2021 at 10:45 biberman 5,77744 gold badges1515 silver badges3838 bronze badges asked May 30, 2021 at 10:40 ofaydnofaydn 4311 silver badge44 bronze badges 2

• You mean document.querySelectorAll('.linkPillar a');? – user15388024 Commented May 30, 2021 at 10:44
• Does this answer your question? javascript selectors – biberman Commented May 30, 2021 at 10:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You can use the query selector to find the elements:

console.log(document.querySelectorAll('.linkPillar a'));

<div class="linkPillar">
        <a href="github"><img src="github.png" alt="GitHub"></a>
        <a href="facebook"><img src="fb.png" alt="facebook"></a>
</div>

You can use getElementsByClassName() method to return a collection of all elements in the document with the class name "linkPillar" and then use querySelectorAll to fetch all of the a tag elements within that element.

var linkPillar = document.getElementsByClassName("linkPillar")[0]; 
var aTags = linkPillar.querySelectorAll("a"); 
console.log(aTags);

<div class="linkPillar">
   <a href="github"><img src="github.png" alt="GitHub"></a>
   <a href="facebook"><img src="fb.png" alt="facebook"></a>
</div>
<a href="twitter"><img src="twitter.png" alt="Twitter"></a>