使用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.

Answer 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]

Answer 2

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 */
}