0

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"><a href="1.html" target=""><span><i class="fa fa-bullseye"></i>&nbsp;&nbsp;I'm On Site</span></a></li>  
<li class="kn-link-2"><a href="2.html" target=""><span><i class="fa fa-pencil-square-o"></i>&nbsp;&nbsp;1. Onsite Staff Signature</span></a></li>  
<li class="kn-link-3"><a href="3.html" target=""><span><i class="fa fa-pencil"></i>&nbsp;&nbsp;2. Service/Signature</span></a></li>  
<li class="kn-link-4"><a href="4.html" target=""><span><i class="fa fa-ban"></i>&nbsp;&nbsp;3. N/A - R</span></a></li>  
<li class="kn-link-5"><a href="5.html" target=""><span>Add Comments</span></a></li>  
<li class="kn-link-6"><a href="6.html" target=""><span><i class="fa fa-check"></i>&nbsp;&nbsp;4. Completed</span></a></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

Moe
  • 77
  • 1
  • 7
  • 2
    What does `allows me to change somethings but not the actual text` mean? What *exactly* are you trying to change? – j08691 Mar 16 '16 at 20:35
  • You can use :after to add text via css. It's hacky and all, but you can. See this old post: http://stackoverflow.com/questions/7896402/how-can-i-replace-text-with-css – Sune S.-T. Mar 16 '16 at 20:36
  • If I understand correctly, the OP is trying to modify the actual text - not the text appearence - inside .kn-link-1. If that is true, css alone won't do, you need to do that with javascript. – andrechalom Mar 16 '16 at 20:42

5 Answers5

2

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"><a href="1.html" target=""><span><i class="fa fa-bullseye"></i>&nbsp;&nbsp;I'm On Site</span></a>
    </li>
    <li class="kn-link-2"><a href="2.html" target=""><span><i class="fa fa-pencil-square-o"></i>&nbsp;&nbsp;1. Onsite Staff Signature</span></a>
    </li>
    <li class="kn-link-3"><a href="3.html" target=""><span><i class="fa fa-pencil"></i>&nbsp;&nbsp;2. Service/Signature</span></a>
    </li>
    <li class="kn-link-4"><a href="4.html" target=""><span><i class="fa fa-ban"></i>&nbsp;&nbsp;3. N/A - R</span></a>
    </li>
    <li class="kn-link-5"><a href="5.html" target=""><span>Add Comments</span></a>
    </li>
    <li class="kn-link-6"><a href="6.html" target=""><span><i class="fa fa-check"></i>&nbsp;&nbsp;4. Completed</span></a>
    </li>
  </ul>
</div>
Alessio Cantarella
  • 5,077
  • 3
  • 27
  • 34
1

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.

Jun Czyrka
  • 26
  • 3
  • This worked perfectly for me! thanks so much. Gonna mark this as solved. I had to add an 'a' at the end: #view_81 ul li:first-child a – Moe Mar 16 '16 at 20:44
0

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;
}
S. Nadezhnyy
  • 582
  • 2
  • 6
  • `:first-child` should be applied to the child itself, not the parent. `#view81:first-child` gets the first element with `#view81`, which is therefore useless as `view81` is an ID. – lucasnadalutti Mar 16 '16 at 20:39
  • you can use this code: `div#view_81 li:first-of-type span{ color:red !important; }` – sidanmor Mar 16 '16 at 20:51
0

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"><a href="1.html" target=""><span><i class="fa fa-bullseye"></i>&nbsp;&nbsp;I'm On Site</span></a></li>  
<li class="kn-link-2"><a href="2.html" target=""><span><i class="fa fa-pencil-square-o"></i>&nbsp;&nbsp;1. Onsite Staff Signature</span></a></li>  
<li class="kn-link-3"><a href="3.html" target=""><span><i class="fa fa-pencil"></i>&nbsp;&nbsp;2. Service/Signature</span></a></li>  
<li class="kn-link-4"><a href="4.html" target=""><span><i class="fa fa-ban"></i>&nbsp;&nbsp;3. N/A - R</span></a></li>  
<li class="kn-link-5"><a href="5.html" target=""><span>Add Comments</span></a></li>  
<li class="kn-link-6"><a href="6.html" target=""><span><i class="fa fa-check"></i>&nbsp;&nbsp;4. Completed</span></a></li>  
</ul>
</div>
indubitablee
  • 8,136
  • 2
  • 25
  • 49
0

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.

TMKAB121
  • 276
  • 2
  • 8