Selection css tag without id - css

Question

I need help with setting up a wordpress menu.
I made my html css but when I go under wordpress and when I use the wp_nav_menu () function I lose my specific id on <a> tags, Wordpress automatically generates new <li> <a>.
How can I select them from the class "menu_word" please?
<ul class="menu_word">
<li><a id="home" href="#">Tilte1</a></li>
<li>Tilte2</li>
<li>Tilte3</li>
<li>Tilte4</li>
<li><a id="sem" href="#">Tilte4</a></li>
<li>Tilte5</li>
</ul>

Answer 1

There you go
body .menu_word >li:nth-child(1)> a{ /*Title1 on pos 1 (specific for first level of menu)*/
border:1px solid red;
}
body .menu_word >li:nth-child(2)> a{ /*Title2 on pos 2 (specific for first level of menu)*/
border:1px solid blue;
}
<ul class="menu_word">
<li><a id="home" href="#">Tilte1</a></li>
<li>Tilte2</li>
<li>Tilte3</li>
<li>Tilte4</li>
<li><a id="sem" href="#">Tilte4</a></li>
<li>Tilte5</li>
</ul>

Answer 2

Can you add a class and target that?
If not, this will work, although its pretty brittle. It'll become more robust if you can add a class to the UL, but if you can add a class, you may as well add it to the <a> tag, or the <li> tag.
body > ul > li:nth-child(1) > a

Answer 3

Thank you for your answers, I also find a solution that I share if it can help.
<ul class="menu_word">
<li><a id="home" href="home">Tilte1</a></li>
<li>Tilte2</li>
<li>Tilte3</li>
<li>Tilte4</li>
<li><a id="sem" href="sem">Tilte4</a></li>
<li>Tilte5</li>
</ul>
a[href*="home"]{
font-weight: 800;
font-size: 1.2em;
}
a[href*="sem"]{
text-transform: capitalize;
}