We Keep Coding

Show/Hide Tab Arrows to Navigate Additional Tabs on Overflow

Right now, I have a tab structure that looks like the following:
As you can see, when the tabs reach the end of the line they wrap to the next line. I know how to hide the additional tabs; however, I want to introduce an arrow system to navigate to the additional tabs when the tabs overflow. Something that looks like below depending on the screen resolution:
I only want to have the arrows appear if there are additional tabs that are being hidden, this leads me to my question: How do I detect when the tabs wrap and insert the arrows?
I need this to work with responsive layouts.
Here is the code I am using to create the tabs (note: it includes hard-coded list items for the arrows):
<ul id="tabs" class="tab-links">
<li class="">Tables & Views</li>
<li class="">ERD</li>
<li class=""><i class="fa fa-caret-left"></i></li>
<li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
<li class="">Query 2</li>
<li class="">Query 3</li>
<li class="">Query 4</li>
<li class="">Query 5</li>
<li class="">Query 6</li>
<li class="">Query 7</li>
<li class="">Query 8</li>
<li class="">Query 9</li>
<li class=""><i class="fa fa-caret-right"></i></li>
<!-- Hidden Tabs -->
<li class="">Query 10</li>
<li class="">Query 11</li>
<li class="">Query 12</li>
</ul>

The answer requested:
window.addEventListener('load', initTabs);
function initTabs() {
var listContainer = document.getElementById('tabs');
var buttonWidthCounter = 0;
var totalContainerWidth = listContainer.offsetWidth;
for (var i = 0; i < listContainer.children.length; i++) {
if (buttonWidthCounter + listContainer.children[i].offsetWidth > totalContainerWidth) {
//button overflow...add tab buttons
console.log('there is overflow...add tab arrow buttons...');
}
buttonWidthCounter += listContainer.children[i].offsetWidth;
}
}
li {
display: inline-block;
}
<ul id="tabs" class="tab-links">
<li class="">Tables & Views</li>
<li class="">ERD</li>
<li class=""><i class="fa fa-caret-left"></i></li>
<li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
<li class="">Query 2</li>
<li class="">Query 3</li>
<li class="">Query 4</li>
<li class="">Query 5</li>
<li class="">Query 6</li>
<li class="">Query 7</li>
<li class="">Query 8</li>
<li class="">Query 9</li>
<li class=""><i class="fa fa-caret-right"></i></li>
<!-- Hidden Tabs -->
<li class="">Query 10</li>
<li class="">Query 11</li>
<li class="">Query 12</li>
</ul>
The answer I suggest:
Scrollbars are much easier to implement and are arguably better.
li{
display:inline-block;
}
ul{
white-space:nowrap;
}
html,body{
margin:0;
padding:0;
}
#container{
width:100vw;
overflow:scroll;
}
<div id="container">
<ul id="tabs" class="tab-links">
<li class="">Tables & Views</li>
<li class="">ERD</li>
<li class=""><i class="fa fa-caret-left"></i></li>
<li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
<li class="">Query 2</li>
<li class="">Query 3</li>
<li class="">Query 4</li>
<li class="">Query 5</li>
<li class="">Query 6</li>
<li class="">Query 7</li>
<li class="">Query 8</li>
<li class="">Query 9</li>
<li class=""><i class="fa fa-caret-right"></i></li>
<!-- Hidden Tabs -->
<li class="">Query 10</li>
<li class="">Query 11</li>
<li class="">Query 12</li>
</ul>
</div>

Moving li to next column

I've got a simple ul like so :
ul.target {
font-family: calibri, verdana, arial;
min-height: 500px;
float: none;
column-count: 4;
column-width: 25%;
column-gap: 1rem;
column-rule: 1px solid gray;
box-sizing: border-box;
}
ul {
margin: auto;
list-style: none;
}
ul > li > ul {
break-after: column;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<ul class="target">
<li class="categ">category 1</li>
<li class="item">test 1</li>
<li class="item">test 2</li>
<li class="categ">category 2</li>
<li class="item">test 3</li>
<li class="item">test 4</li>
<li class="item">test 5</li>
<li class="item">test 6</li>
<li class="item">test 7</li>
<li class="item">test 8</li>
<li class="categ">category 3</li>
<li class="item">test 9</li>
<li class="item">test 10</li>
<li class="item">test 11</li>
<li class="item">test 12</li>
<li class="item">test 13</li>
<li class="item">test 14</li>
<li class="item">test 15</li>
<li class="item">test 16</li>
<li class="item">test 17</li>
<li class="item">test 18</li>
<li class="categ">category 4</li>
<li class="item">test 19</li>
<li class="item">test 20</li>
<li class="item">test 21</li>
<li class="item">test 22</li>
<li class="item">test 23</li>
<li class="item">test 24</li>
<li class="categ">category 5</li>
<li class="item">test 25</li>
<li class="item">test 26</li>
<li class="item">test 27</li>
<li class="item">test 28</li>
<li class="item">test 29</li>
<li class="item">test 30</li>
<li class="item">test 31</li>
<li class="item">test 32</li>
<li class="item">test 33</li>
</ul>
As you can see here, category 2 is at the very bottom and category 3 is in the middle. I want to be able to move them to the next column dynamically if they're at the very bottom. Knowing that the height might be larger and there could be a lot of other categories in each column, I want to push the LAST category of the column to the next column, thus modifying the rest of the columns accordingly. I don't have any idea on where to start...
EDIT, taken from comments :
To clarify somet hings :
My code is a small example of a larger code containing much more than that, so no the question is still about how can I move each category to the next column, trying to find another way of doing it won't work in my case as this is just a preview. I'm using JQuery in order to get the categories and the list of items, and then I don't know what to do to push the category to the next column using JS. It should just reposition to the next column if it's the last category of the current column.

You could apply the break-before property to the .categ class, but then you end up with three columns:
var item = $(".item")
var categ = $(".categ")
ul {
font-family: calibri, verdana, arial;
min-height: 500px;
float: none;
margin: auto;
list-style: none;
column-count: 4;
column-width: 25%;
column-gap: 1rem;
column-rule: 1px solid gray;
box-sizing: border-box;
}
.categ {
break-before: column;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<ul>
<li class="categ">category 1</li>
<li class="item">test 1</li>
<li class="item">test 2</li>
<li class="categ">category 2</li>
<li class="item">test 3</li>
<li class="item">test 4</li>
<li class="item">test 5</li>
<li class="item">test 6</li>
<li class="item">test 7</li>
<li class="item">test 8</li>
<li class="categ">category 3</li>
<li class="item">test 9</li>
<li class="item">test 10</li>
<li class="item">test 11</li>
<li class="item">test 12</li>
</ul>
You have to alter the DOM in order to get this to work. In the following snippet I've made "sublists" out of the .categ list items and all their following .item siblings (using jQuery as you'd included it in your snippet). I've also added a class to the top-most ul so as to differentiate it for styling. You could also use a class on the uls for the "sublists" instead of using the child selector as I did.
$(".categ").each((idx, cat) => $(cat).nextUntil(".categ", ".item").addBack().wrapAll("<li><ul>"));
ul.target {
font-family: calibri, verdana, arial;
min-height: 500px;
float: none;
column-count: 4;
column-width: 25%;
column-gap: 1rem;
column-rule: 1px solid gray;
box-sizing: border-box;
}
ul {
margin: auto;
list-style: none;
}
ul > li > ul {
break-after: column;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<ul class="target">
<li class="categ">category 1</li>
<li class="item">test 1</li>
<li class="item">test 2</li>
<li class="categ">category 2</li>
<li class="item">test 3</li>
<li class="item">test 4</li>
<li class="item">test 5</li>
<li class="item">test 6</li>
<li class="item">test 7</li>
<li class="item">test 8</li>
<li class="categ">category 3</li>
<li class="item">test 9</li>
<li class="item">test 10</li>
<li class="item">test 11</li>
<li class="item">test 12</li>
</ul>

Disclaimer, I'm a little unsure about what you're trying to do:
I think the problem is not the presentation rules (CSS) you apply to your data (HTML). I think the problem is dat your data does not provide enough context for you presentation rules to act upon.
What I think you're trying to do is to have 3 (or more) separate lists presented on something that looks like a footer. However your HTML structures does not seem to properly match this scheme.
Try to make your HTML more explicit. Why put everything in one list instead of one list per category? Then you could justify the categories the way you want by either floats or flex or even grid layouts. I don't see why you should need jQuery for this?
Or have I misinterpreted your question?

Finding a better way to implement navigation bar which has subcategories

I'm building a navigation bar. The link below is what I just have completed so far.https://jsfiddle.net/dsdzyp23/2/
<div class="navbar-01">
<div class="navbar-01-container">
<div class="main-container">
<div class="logo-center">
<img style="width: 240px;" src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg">
</div>
<button class="nav-toggle-btn">
<img style="width: 50px;" src="https://cdn2.iconfinder.com/data/icons/ui-icon-part-2/128/navigation-512.png">
</button>
<ul class="nav-categories">
<li>RUNWAY</li>
<li>WOMEN</li>
<li>MEN</li>
<li>CHILDREN</li>
</ul>
</div>
</div>
<div id="runway" class="navbar-sub">
<div class="main-container">
<div class="nav-sub-list">
<ul class="nav-sub-categories">
WOMEN
<li>Cruise 2018</li>
<li>Fall Winter 2017 Runway</li>
<li>Pre-Fall 2017</li>
</ul>
<!--
-->
<ul class="nav-sub-categories">
MEN
<li>Cruise 2018</li>
<li>Fall Winter 2017 Runway</li>
<li>Pre-Fall 2017</li>
</ul>
<!--
-->
<ul class="nav-sub-categories">
UNSKILLED WORKER
</ul>
</div>
</div>
</div>
</div>
Cause my subcategories are not wrapped with anchors, when my mouse leaves the anchor, the subcategories div closes, therefore I cannot reach to the content which are wrapped in the subcategories div.
I' am wondering if wrapping subcategories with anchor is the best way to implement a navigation bar? (Considering to responsive web design, it seems like wrapping together is the most easiest way to implement?)

Here's the standard way to make a menu. It's also dependent on requirements.
ul {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.nav-list {
text-align: center;
}
.nav-list-item {
display: inline-block;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.nav-list-item:hover .subnav-list {
display: block;
}
.subnav-list {
display: none;
width: 100px;
transform: translateX(-50%);
position: absolute;
top: 100%;
left: 50%;
}
<nav class="nav">
<ul class="nav-list">
<li class="nav-list-item">
Nav 1
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 2
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 3
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 4
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 5
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 6
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 7
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 8
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 9
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 10
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
</ul>
</nav>

jQuery UI Sortable Multiple element target

I have 2 list element
<div id="list-one">
<ul class="ul-one">
<li data-order="1">item 1</li>
<li data-order="2">item 2</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="ul-two">
<li data-order="1">item 4</li>
<li data-order="2">item 5</li>
<li data-order="3">item 6</li>
</ul>
</div>
Can ul-two list element order follow ul-one order when I sort ul-one using jQuery Sortable ?
I want get the result like
<div id="list-one">
<ul class="ul-one">
<li data-order="2">item 2</li>
<li data-order="1">item 1</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="ul-two">
<li data-order="2">item 5</li>
<li data-order="1">item 4</li>
<li data-order="3">item 6</li>
</ul>
</div>
just drag ul-one element
Thanks for the answer

Sorry for misunderstand the question.
This is a working solution. I added id tag to easy call
http://jsfiddle.net/39ZvN/1141/

Try this
<div id="list-one">
<ul class="sort ul-one">
<li data-order="1">item 1</li>
<li data-order="2">item 2</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="sort ul-two">
<li data-order="1">item 4</li>
<li data-order="2">item 5</li>
<li data-order="3">item 6</li>
</ul>
</div>
$( '.sort li' ).each(function() {
var position = $(this).data('order');
$(this).siblings().eq(position+1).after(this);
});

jQuery First Item for Each ID

I have two seperate lists and each of the list should add class active. Here is my HTML:
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
CSS
.active {
color: red;
}
JavaSript
$(document).ready(function () {
$("[id^='list'] .item").first().addClass("active");
});
As you can see only the #list1's first item getting the active class. How can i achive give the both list's first item active class.
Here is the fiddle: https://jsfiddle.net/iCromwell/rkvzhebd/1/

Try looping over the parent, and then target first .item
$(document).ready(function () {
$("[id^='list']").each(function(){
$(this).find('.item').first().addClass("active");
});
});
Fiddle

You have to loop through the list, the way you are approaching it, the class objects are being stacked in one selection list, and the first() is setting class to the first one only:
$(document).ready(function () {
$("[id^='list']").each(function(){
$(this).find('.item').first().addClass("active");
})
});
https://jsfiddle.net/rkvzhebd/4/

You can use jQuery first-child filter, such as:
$("ul li:first-child").addClass("active");

:first or .first() looks for first element in the matched set. So, that is functioning correctly. While in your case you need to target all the first child elements in the matched parents.
Use :first-child pseudoselector instead:
$('[id^="list"] .item:first-child').addClass('active');
.active{color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>

first() filter your result and return only first element - so only one element is selected. Use :first-child pseudo selector to achieve result.
$(document).ready(function () {
$("[id^='list'] .item:first-child").addClass("active");
});
$(document).ready(function () {
$("[id^='list'] .item:first-child").addClass("active");
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>

You can use $("[id^='list']").find('.item:first').addClass("active");
Explanation:
$("[id^='list']") will return a list of uls
Then in this list, you can search using .find. Since you only need first element, add :first selector
Add class to all elements fetched
$(document).ready(function() {
$("[id^='list']").find('.item:first').addClass("active");
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>

Consider using this code below:
$(document).ready(function () {
$('[id^="list"]').each(function(){
$(this).find('.item').first().addClass('active');
});
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>

You can use first-child selector on each ul instead of id^=list
$("ul li:first-child").addClass("active");
.active{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>

Use this:
$(document).ready(function () {
$("ul[id^='list'] :first-child").addClass("active");
});
Fiddle here:
https://jsfiddle.net/mxautp3L/

If you want to do it with javascript you can do it like this,
Here, we are selecting both the list ul tag $("[id^='list']") which returns an array of both list now we can iterate over the array using jquery each() tag which call the function sent in argument with the this attribute pointing to the each item in the array.
Now, we can add the class .active by simply doing $(this).find('item').first().addclass('active');
$(document).ready(function () {
$('[id^="list"]').each(function(){
$(this).find('.item').first().addClass('active');
});
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
link to fiddle
The whole thing can be done without javascript and using only css as follows
ul[id^='list'] :first-child {
color: red;
}
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
link to fiddle