how to use one class with many elements? - html

Question

for some reasons i have somthing like this in my html code
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>
can i make just one css file for this code contain something like this :
.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

You just need to try nth-child of CSS3 property.
ul.yourClass li.firstclasname:nth-child(2){
background:url('/image/facebook.png') -277px -446px no-repeat;
background-size:auto;
}

Answer 2

You can use starts with [attr^=value] attribute selector.
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>

Answer 3

For cases like this I like to use two selectors -- a common one, relevant to all the items, and a specific one to identify a single item.
An example use would be something like this:
<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>
In CSS you can then target the list itself, all the items or one specific item.
Edit
Apologies, I skimmed your question and missed the part about id=1 and id=2. There are a few different options depending on how many IDs there will be and whether or not this will be known.
For a short list of known ID's you could just target the individual items as I mentioned. If there are an unknown number of IDs (or the IDs themselves are unknown) you may consider using the nth-child selector.
This depends entirely on the effect you're trying to achieve, which isn't detailed in your question, but some commonly used (in the context of my example markup above) are as follows:
.contact-list:nth-child(odd) applies to every odd element, i.e. 1st, 3rd, 5th
.contact-list:nth-child(even) applies to every even element, i.e. 2nd, 4th, 6th
.contact-list:nth-child(1) applies only to the first element
.contact-list:nth-child(4n+4) applies to every fourth element
And so on. Most common requirements have been done a thousand times before and can be found with a quick google search along the lines of "CSS every second element".