Selecting multiple elements with same classname using CSS

Question

So i have a list of questions on the home page like this:

<div id="question-summary-36771853" class="question-summary narrow">
<div id="question-summary-36772065" class="question-summary narrow">
<div id="question-summary-36772003" class="question-summary narrow">
<div id="question-summary-36772259" class="question-summary narrow">
<div id="question-summary-36772257" class="question-summary narrow">
<div id="question-summary-36772256" class="question-summary narrow">
<div id="question-summary-36772253" class="question-summary narrow">

now the id changes everytime the page is refreshed. I want to know how can i use CSS selector to capture just the first 5 questions.

You can't in CSS...you'd need javascript or some other selection method — Paulie_D
– Paulie_D, Commented Apr 21, 2016 at 14:43

alecxe · Accepted Answer · 2016-04-21 14:45:27Z

1

You can partially match the id using the "starts-with" or "contains" notation:

div[id^="question-summary-"]

Or, you can check the class instead of id:

div.question-summary

As for limiting it to 5 first elements only, you can use the "findElements" method of your selenium language bindings and slice the result. Example in Python:

questions = driver.find_elements_by_css_selector('div[id^="question-summary-"]')
first_5_questions = questions[:5]

edited Apr 21, 2016 at 14:45

answered Apr 21, 2016 at 14:43

alecxe

476k127 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Carlos Mateo · Accepted Answer · 2016-04-21 15:25:51Z

0

If you'll like a CSS only based way to do it, you could use :nth-child pseudo-selector, to select only the first 5 elements. It's a little bit manual, but can be achieved with CSS like this:

.question-summary:nth-child(1),
.question-summary:nth-child(2),
.question-summary:nth-child(3),
.question-summary:nth-child(4),
.question-summary:nth-child(5) {
   /* your style goes here */
}

answered Apr 21, 2016 at 15:25

Carlos Mateo

2602 silver badges6 bronze badges

Collectives™ on Stack Overflow

Selecting multiple elements with same classname using CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related