I have bought a template with a tab tour element (kind of a menu that unfolds different content) and I wanted to change the color of the text inside the list.
Each and every tab needs to have a different color. So first one red, second blue, third green and fourth yellow. I tried everything with childs, element, classes etc. but no result.
Here is one of the codes I tried
#one a
{
color:#e28844
}
<ul class='cmsms_tabs_list'>
<li id="one" class="cmsms_tabs_list_item">
<a href="#">
<span>One</span>
</a>
</li>
<li id="two" class="cmsms_tabs_list_item">
<a href="#">
<span>Two</span>
</a>
</li>
<li id="three" class="cmsms_tabs_list_item">
<a href="#">
<span>Three</span>
</a>
</li>
<li id="four" class="cmsms_tabs_list_item">
<a href="#">
<span>Four</span>
</a>
</li>
</ul>
You can add following style
.cmsms_tabs_list li:nth-of-type(1) a span {
color : red;
}
.cmsms_tabs_list li:nth-of-type(3) a span {
color : blue;
}
.cmsms_tabs_list li:nth-of-type(4) a span {
color : green;
}
.cmsms_tabs_list li:nth-of-type(2) a span {
color : yellow;
}
For reference - http://jsfiddle.net/s1s12w2x/1/
Related
im trying to fire a class when a hover a button, basically inside of my href i have a i icon tag that needs to change color: but is not working:
my css and html:
.catalog-icons i:hover{
color: #ba658a;
}
.catalog-icons .btn-icon:hover ~.catalog-icons i:hover{
color:#ba658a;
background-color: white;
}
<li class="list-inline-item">
<a class="btn btn-icon" href="">
<i class="fontello-icon icon-vet"></i>
</a>
</li>
I added an image since your code does not provide any.
Your rule should be simple:
.your_hovered_element_class:hover affected_elemnt_inside
in your case once .btn-icon is hovered, you change the i background color
.btn-icon:hover i{
background-color: #ba658a;
}
i img {
height: 1em;
}
<li class="list-inline-item">
<a class="btn btn-icon" href="">link text
<i class="fontello-icon icon-vet"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-person-outline-128.png" /></i>
</a>
</li>
I have pagination
How can I change background of pagination__link with text "left" when click on the other links? It is necessary to use only CSS.
You can do this, but frankly it's messy, using CSS flexible-boxes along with the relatively new :focus-within pseudo-class. This does require reversing the order of <li> elements within the <ul> however:
.pagination {
/* sets the display to use the flex layout: */
display: flex;
/* ensures the contents of the <ul> are shown in
columns and in reverse-order: */
flex-direction: column-reverse;
}
/* selects first the <li> that has a focused element
within it, then finds all subsequent <li> elements,
using the general-sibling combinator ('~') that
also matches the :last-child pseudo-class (there can,
obviously, be only one) then finds the <a> element(s)
which is a child of that <li> element: */
li:focus-within ~ li:last-child > a {
background - color: red;
}
<ul class="pagination">
<li class="pagination__item pagination__item--active">
<a class="pagination__link" href="#">
Page 2
</a>
</li>
<li class="pagination__item">
<a class="pagination__link" href="#">
Page 1
</a>
</li>
<li class="pagination__item">
<a class="pagination__link" href="#">
left
</a>
</li>
</ul>
External JS Fiddle demo.
References:
:focus-within.
flex-direction.
General Sibling Combinator (~)
"Using CSS Flexible Boxes" (MDN).
input[name="radio"]{
display: none;
}
label{
text-decoration: underline;
color: blue;
}
input[name="radio"]:checked + label{
background-color: yellow;
}
<ul class="pagination">
<li class="pagination__item">
<input type="radio" id="radio1" name="radio" />
<label for="radio1">left</label>
<!--
<a class="pagination__link" href="#">
left
</a>
-->
</li>
<li class="pagination__item">
<input type="radio" id="radio2" name="radio" />
<label for="radio2">Page1</label>
<!--
<a class="pagination__link" href="#">
Page 1
</a>
-->
</li>
<li class="pagination__item pagination__item--active">
<input type="radio" id="radio3" name="radio" />
<label for="radio3">Page1</label>
<!--
<a class="pagination__link" href="#">
Page 2
</a>
-->
</li>
</ul>
Maybe it's not the answer what you want.
But I think it can be good hint for your problem.
You can use the checkbox trick or radio trick.
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
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>
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.
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;
}
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>
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.
SO I am trying to create a hidden drop down menu and I want only the outer li to have specific css elements. Want I want to know if you can use multiple child selectors, > , so I can apply to the links within those li 's and not have applied to the links in the smaller menus
For example:
<ul class="top">
<li>
random
<ul class="second">
<li>
random second
</li>
</ul>
</li>
<li>
random
<ul class="second">
<li>
random second
</li>
</ul>
</li>
<li>
random
<ul class="second">
<li>
random second
</li>
</ul>
</li>
<li>
random
<ul class="second">
<li>
random second
</li>
</ul>
</li>
and a css element would be:
ul.top > li > a {
color: red;
}
whereas I would want the a in ul.second to, a random example, have color: blue
If you want to target the "outer" links, you should do just as you wrote:
ul.top > li > a {
color: red;
}
If you want to target the "inner" links, just use any of the following selectors:
ul.top ul a {
color: green;
}
or
ul.second > li > a {
color: green;
}
I'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS)
The markup is now something like this:
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Of course everything is {display:inline}
Set the hover to the ul inside the navgroups. CSS below does that, you can add whatever styling you like to it.
http://jsfiddle.net/PQShS/9/
CSS:
.navgroup ul:hover .navicon{
color:#FFF;
}
Your Code
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Since it boils down to changing the look of the icon when the cursor hovers anywhere above the ul element, you can do this:
.navgroup ul:hover .navIcon .icon-home
{
/*hover style for the icon*/
}
.navgroup ul .navIcon .icon-home
{
/*non-hover style for the icon*/
}
You should use the following css:
.navgroup:hover .navicon {
background-color: blue;
}
It will modify just the navicon anytime you hover anywhere within the navgroup
See this jsFiddle
you should use anchor tag
css:
.testing:hover {
color: red;
}
html:
<a class="testing" href="">
<span>hello1</span>
<span style="color:black;">hell2</span>
</a>
Give the whole styling to <a> tag and give the inline styling to other element inside <a> tag that you don't want to change.