Как сгруппировать селектора CSS вместе?

Question

Ниже CSS делает div имеющим цвет фона. То, что я пытаюсь достичь, заключается в следующем: когда пользователь нажимает ссылку привязки, тогда ссылка, на которую они нажали, подсвечивается (на той же странице). Таким образом, в приведенном ниже примере, если бы была ссылка на ахор, подобная этой: index.php#content-5, тогда фон становится желтым (как здесь, в stackoverflow)

Так оно работает - но есть ли уловкий способ собрать все эти партии div? Я думаю что-то вроде #content-1,#content-2,#content-3 и т. Д. - или это неправильный подход?

Спасибо!

#content-5 { 
/*width: 75%;*/ 
margin: 0 auto; 
background-color: #fff; 
-webkit-transition: all 1s linear; 
} 

#content-5:target { 
background-color: #ffa; 
-webkit-transition: all 1s linear; 
} 

Answer 1

Вы можете сделать это с помощью селектора атрибутов. Вы можете написать все #contentXXX, которое вам нужно, и вам нужен только один селектор.

[attribute^="value"] означает, что цели элемента со значением atribute начиная с value словом. Так что в этом случае мы можем написать [id^="content"] это означает, что все элементы, которые его атрибут id начинается с content слова.

a { 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    padding: 3px; 
 
} 
 
[id^="content"] { 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
    -webkit-transition: all 1s linear; 
 
} 
 

 
[id^="content"]:target { 
 
    background-color: #ffa; 
 
    -webkit-transition: all 1s linear; 
 
}

<a href="#content1">Content 1</a> 
 
<a href="#content2">Content 2</a> 
 
<a href="#content3">Content 3</a> 
 
<a href="#content4">Content 4</a> 
 
<a href="#content5">Content 5</a> 
 

 
<div id="content1">Content</div> 
 
<div id="content2">Content</div> 
 
<div id="content3">Content</div> 
 
<div id="content4">Content</div> 
 
<div id="content5">Content</div>

Answer 2

Да. вы можете просто положить запятые, чтобы применить правила стиля ко всем элементам одновременно.

.box1,.box2,.box3{ 
    background: green; 
}