Select a single link to change css properties - html

Question

I'm using a service which doesn't allow me to modify the code, but I"m able to add my own CSS. I am trying to change the CSS of a specific Link inside a li.
Here is my code:
<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">
<li class="kn-link-1"><span><i class="fa fa-bullseye"></i> I'm On Site</span></li>
<li class="kn-link-2"><span><i class="fa fa-pencil-square-o"></i> 1. Onsite Staff Signature</span></li>
<li class="kn-link-3"><span><i class="fa fa-pencil"></i> 2. Service/Signature</span></li>
<li class="kn-link-4"><span><i class="fa fa-ban"></i> 3. N/A - R</span></li>
<li class="kn-link-5"><span>Add Comments</span></li>
<li class="kn-link-6"><span><i class="fa fa-check"></i> 4. Completed</span></li>
</ul>
</div>
I want to select only the very first list item and tweak the css settings of the link within it - I want to make the background color and text different. Using the following allows me to change somethings but not the actual text within that li.
.kn-link-1 {
}
I also want to make sure that this change only happens for this specific instance where the parent id="view_81".
Can someone help find the right way to select just that

Answer 1

CSS is not the right place where you should change the content, anyway if you have no other choice, you could use the :after selector to do the following trick:
#view_81 > ul > li:nth-child(1) > a > span {
display: none;
}
#view_81 > ul > li:nth-child(1) > a:after {
background-color: red;
content: "your text";
}
<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">
<li class="kn-link-1"><span><i class="fa fa-bullseye"></i> I'm On Site</span>
</li>
<li class="kn-link-2"><span><i class="fa fa-pencil-square-o"></i> 1. Onsite Staff Signature</span>
</li>
<li class="kn-link-3"><span><i class="fa fa-pencil"></i> 2. Service/Signature</span>
</li>
<li class="kn-link-4"><span><i class="fa fa-ban"></i> 3. N/A - R</span>
</li>
<li class="kn-link-5"><span>Add Comments</span>
</li>
<li class="kn-link-6"><span><i class="fa fa-check"></i> 4. Completed</span>
</li>
</ul>
</div>

Answer 2

have you tried:
#view_81 ul li.kn-link-1
or
#view_81 ul li:first-child
To clarify my examples: "#" selector in CSS means "the one with the following ID" and then i'm telling the "ul" that comes after that and then the "li" that comes after that which has this class "kn-link-1" or which is the first item inside the tag (:first-child subselector).
I hope some of them help.

Answer 3

use this style:
li:first-of-type span
{
}
also be sure that your style link is last in your style references. If this does not help, declare your styles with "!important" like here:
li:first-of-type span
{
color:red !important;
}

Answer 4

using the selectors: #view_81 .kn-link-1 a targets the element with id="view_81" and the descendant element with class="kn-link-1" and the a tag inside that to change the background and text color.
#view_81 .kn-link-1 > a {
background: red;
color: yellow;
}
<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">
<li class="kn-link-1"><span><i class="fa fa-bullseye"></i> I'm On Site</span></li>
<li class="kn-link-2"><span><i class="fa fa-pencil-square-o"></i> 1. Onsite Staff Signature</span></li>
<li class="kn-link-3"><span><i class="fa fa-pencil"></i> 2. Service/Signature</span></li>
<li class="kn-link-4"><span><i class="fa fa-ban"></i> 3. N/A - R</span></li>
<li class="kn-link-5"><span>Add Comments</span></li>
<li class="kn-link-6"><span><i class="fa fa-check"></i> 4. Completed</span></li>
</ul>
</div>

Answer 5

I would stylize the css like this:
<style>
#view_81 .kn-link-1{
padding: 50px;
background-color: gray;
}
#view_81 .kn-link-1 a{
text-decoration: none;
}
#view_81 .kn-link-1 span{
color: white;
font-weight: bold;
text-shadow: 1px 2px 2px black;
}
</style>
This css only applies to the class .kn-link-1 within id #view_81.
I added a little basic css for your testing purposes, but you get the point.