Как использовать один класс со многими элементами?

Question

по некоторым причинам я имею что-то вроде этого в моем HTML коде

ID = 1

     <li class="anyclass" ></li> 
          <li class="firstclasname + id" ></li> 
          <li class="scondclasname + id" ></li> 
          <li class="thirdclasname + id ></li> 
          <li class="forthclasname + id" ></li> 
          <li class="fifthclasname + id" ></li> 
         </ul> 

ID = 2

<li class="anyclass" ></li> 
          <li class="firstclasname + id" ></li> 
          <li class="scondclasname + id" ></li> 
          <li class="thirdclasname + id ></li> 
          <li class="forthclasname + id" ></li> 
          <li class="fifthclasname + id" ></li> 
         </ul> 

я могу сделать только один файл CSS для этого кода содержит что-то например:

.every first calss name + what ever id { 

background-image: url('/image/facebook.png'); background-repeat: no-repeat; background-size: auto; background-position: -277px -446px; }

Answer 1

В таких случаях, как это мне нравится использовать два селекторы - общий, соответствующих все пункты, а также конкретный отождествить один элемент.

Пример использование будет что-то вроде этого:

<ul class="contact-list"> 
    <li class="item item-1">Contact 1</li> 
    <li class="item item-2">Contact 2</li> 
    <li class="item item-3">Contact 3</li> 
</ul> 

В CSS вы можете настроить таргетинг самого списка, все элементы или один конкретный элемент.

Редактировать

Извиняюсь, я обезжиренное свой вопрос и пропустил часть о ид = 1 и ид = 2. Существует несколько различных вариантов в зависимости от количества идентификаторов и будет ли это известно.

Для краткого списка известных идентификаторов вы можете просто настроить таргетинг на отдельные элементы, как я уже упоминал. Если есть неизвестное количество идентификаторов (или сами идентификаторы неизвестны), вы можете использовать селектор nth-child.

Это полностью зависит от эффекта, который вы пытаетесь достичь, который не описан в вашем вопросе, но некоторые часто используемые (в контексте моего примера разметки выше) следующим образом:

• .contact-list:nth-child(odd) относится к каждому нечетному элементу, т.е. 1, 3, 5
• .contact-list:nth-child(even) применяется к каждому элементу даже, то есть 2-й, 4-ю, 6-я
• .contact-list:nth-child(1) относится только к первому элементу
• .contact-list:nth-child(4n+4) относится к электронному очень четвертый элемент

И так далее. Наиболее распространенные требования выполнялись тысячу раз раньше и могут быть найдены с быстрым поиском google по строкам «CSS каждый второй элемент».

Answer 2

Вам просто нужно попробовать nth-child свойства CSS3.

ul.yourClass li.firstclasname:nth-child(2){ 
    background:url('/image/facebook.png') -277px -446px no-repeat; 
    background-size:auto; 

}

Answer 3

Вы можете использовать начинается с [attr^=value] селекторов атрибутов.

li[class^="firstclasname"] { 
 
    background: blue; 
 
}

<ul> 
 
    <li class="anyclass"></li> 
 
    <li class="firstclasname1"></li> 
 
    <li class="scondclasname1"></li> 
 
    <li class="thirdclasname1"></li> 
 
    <li class="forthclasname1"></li> 
 
    <li class="fifthclasname1"></li> 
 
</ul> 
 
<ul> 
 
    <li class="anyclass"></li> 
 
    <li class="firstclasname2"></li> 
 
    <li class="scondclasname2"></li> 
 
    <li class="thirdclasname2"></li> 
 
    <li class="forthclasname2"></li> 
 
    <li class="fifthclasname2"></li> 
 

 
</ul>