Customization text in html - css

Question

ul.bs-pagination {
font-weight: 500;
height: 30px;
line-height: 30px;
margin: 0 2px;
min-width: 30px;
text-align: center;
align-items: center;
display: flex;
font-size: 18px;
}
ul.bs-pagination a {
padding: 0 10px;
border-radius: 5px;
color: #cc092f;
transition: 0.3s;
border: 1px solid transparent;
}
ul.bs-pagination a:hover {
border-color: #cc092f;
}
<nav class="bs-pagination__nav" aria-label="Paginação">
<ul class="bs-pagination">12<a href="p0/IZ7_819E19820H3TB0Q3I25JK808F2=CZ6_819E19820H3TB0Q3I25JK800I3=MKJTMIKw=GE=/#Z7_819E19820H3TB0Q3I25JK808F2"
title="Link para a página 3" id="pc1617018954514_linkToPage_3">3</a> </ul>
</nav>
The sequence 1 2 3 above is how it should be and the one below is like it should be ...
I have an html element, where I want to add a css customization to it, but it is not between span, it has no class and id. It is simply a text inside a div, can I style it?

Answer 1

Try to apply your styles directly to ul parameter and the next you can write separated styles for links.
ul.bs-pagination {color: red;} - it's for 1
ul.bs-pagination > a {color: blue;} - it's for 2 and 3
ul.bs-pagination {
font-weight: 500;
height: 30px;
line-height: 30px;
margin: 0px 2px;
min-width: 30px;
text-align: center;
align-items: center;
display: flex;
font-size: 18px;
}
ul.bs-pagination a {
padding: 0 10px;
border-radius: 5px;
color: #cc092f;
transition: 0.3s;
border: 1px solid transparent;
text-decoration: none;
}
ul.bs-pagination a:first-child {
margin-left: 10px;
}
ul.bs-pagination a:hover {
border-color: #cc092f;
}
<nav class="bs-pagination__nav" aria-label="Paginação">
<ul class="bs-pagination">123 </ul>
</nav>
Frankly speaking if you can't put your links inside <li> </li>, you should change your ul to div like below:
div.bs-pagination {
font-weight: 500;
height: 30px;
line-height: 30px;
margin: 0px 2px;
min-width: 30px;
text-align: center;
align-items: center;
display: flex;
font-size: 18px;
}
div.bs-pagination a {
padding: 0 10px;
border-radius: 5px;
color: #cc092f;
transition: 0.3s;
border: 1px solid transparent;
text-decoration: none;
}
div.bs-pagination a:first-child {
margin-left: 10px;
}
div.bs-pagination a:hover {
border-color: #cc092f;
}
<nav class="bs-pagination__nav" aria-label="Paginação">
<div class="bs-pagination">123 </div>
</nav>

Answer 2

Firstly, your HTML code is not correct. You are changing the semantics of HTML elements. The whole purpose of developing HTML is to describe the semantic element of the documents.
According to HTML Spec, the only children of ul element is li element.
<ul>
<li>Norway</li>
<li>Switzerland</li>
<li>United Kingdom</li>
<li>United States</li>
</ul>