What I am styling here (ul, li or a)

Question

I have one CSS file which I found it in one website, but I have a confusion about it. The code is:

ul li a {
background-color: FFFFFF;
border: 1px solid 86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
direction:rtl;
}

So, what I am styling here? as I know, it should be (( a )) tag, so if I add

display:inline-block;

to (( ul )) tag styling which I found here (( UL display: block )) it should work, but unfortunately I failed to make it.

Maybe I will have one more question later, but for timing i want to understand the code and correct my information.

Best regards and thanks in advance,

Gharib

edit: I want to use both inline-block and block, and here is my full code:

ul.ablock {
display: block;
}
ul.aninline {
display: inline-block;
float: right;
width: 50%;
}
a {
background-color: FFFFFF;
border: 1px solid 86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
direction:rtl;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
a:active, a:hover {
background-color:2F62AC;
color:FFFFFF;
}

and the html is something like:

<ul class="ablock">
<li><a href="#" onclick="mSearch($('#SearchText').val());"><div align="center">Find</div></a></li>
</ul>
<ul class="aninline">
<li><a href="#"><div align="center">Back</div></a></li>
<li><a href="#"><div align="center">Next</div></a></li>
</ul>

Answer 1

The above selector will target all a elements which are nested under li which is further nested under ul , that's a general element selector, which will target all the a element which falls in that pattern. It is better to be specific and use a class instead, like

ul.class_name li a {
   /* Styles goes here */
}

The above selector will only target a elements which are nested under li which are further nested under an ul element having a class called .class_name

---

As you commented, it seems like you want to target a ul element, now instead of using something like

ul {
   /* Styles goes here */
}

Will apply the styles to all the ul elements, instead, be specific, either assign a class to your ul element and use a selector like

ul.class_name {
   /* Styles goes here */
}

Or you can also use a nested selector like

div.wrapper_div ul {
   /* Styles goes here */
}

Here, in the above selector we are selecting all the ul which are nested under .wrapper_div .

---

Just a side note, you seem to be confused so don't wanna confuse you more, so don't read this, you can simply ignore, but if you want to learn, just make sure that, if you are targeting ul , make sure you use > selector which will select direct child, as users tend to nest a ul element under li , say for example dropdown menu, this is common, so it is better to use a selector like

div.class_name > ul { /* Selects first level ul elements */
   /* Styles goes here */
}

ul > li > ul { /* Selects nested level ul elements */
   /* Styles goes here */
}

Answer 2

You are targeting the <a> element here. The reason for the ul and li is that, you're targeting a specific nesting of a . Namely, you are targeting a <a> that is a descendant of <li> that is in turn, a descendant of a <ul> .

If you want to add dispay: inline-block to all <ul> elements then above the rule for ul li a you want to add:

ul { display: inline-block; }