I have been trying to create a border-color change hover effect with CSS and something seems to not be working properly. Here is my code:
Markup:
<ul>
<li class="hover">
<img src="img/content/lighter.png" alt="lighter"/>
<p>Discusing Strategy</p>
</li>
<li class="triangle"></li>
<li class="hover">
<img src="img/content/wrench.png" alt="wrench"/>
<p>Beginig <br/> Designs & Development</p>
</li>
<li class="triangle"></li>
<li>
<img src="img/content/car.png" alt="car"/>
<p>Delivering Product</p>
</li>
</ul>
CSS:
div#bpath ul li.triangle {
width: 0;
height: 0;
border-top: 95px solid #d0dde5;
border-left: 20px solid #c1c1c1;
border-bottom: 95px solid #d0dde5;
}
div#bpath ul li.hover:hover li.triangle {
border-left-color: #5f9999;
}
What am I doing wrong here? I used the same technique to change the color of the p element and that worked. Why dosen't the border color change work?
Your selector:
div#bpath ul li:hover li.triangle
is trying to match a li element of class 'triangle' within an li. As you don't appear to have a nested list (therefore no li elements within other li elements) this doesn't seem able to work.
If you remove the latter li (li.triangle) to give (all, or one, of) the following:
div#bpath ul li:hover,
#bpath ul:hover li.triangle:hover,
#bpath ul:hover li.triangle,
#bpath ul li.triangle:hover {
border-left-color: #5f9999;
}
this might work. Assuming your posted-HTML is correct.
If you want all triangle li's to be changed use this:
div#bpath ul:hover li.triangle{
border-left-color: #5f9999;
}
If you want just the next triangle element it's more tricky but you can try this:
div#bpath ul li:hover + li.triangle {
clear:both;
}
I think this doesn't work on ie. If you want it to work on IE i would go for jquery.
you should use this way,
div#bpath ul li.triangle:hover {
border-left-color: #5f9999;
}
you can use this fiddle, which changes the triangles color and adapt it to clarify your question. http://jsfiddle.net/j7YSu/1/
(or just accept it as the right answer :))
i had some issues with your code, but maybe this fiddle will help: http://jsfiddle.net/j7YSu/3/
Related
I constantly fail to prevent a submenu item from inheriting the color of a top item. I know that similar questions have been asked already but am sorry to not be able to solve my problem using them.
CSS:
.Topmenu a{
color:black;}
.Topmenu.update a{
color:blue;}
.Submenu a{
color:black;}
Now the Menu itself looks like this:
<div id='Mainmenu'><ul>
<li class='Topmenu update'><a href='Link1'>Link1</a><ul>
<li class='Submenu'><a href='Link2'>Link2</a></li>
</ul></li>
Now the submenu Link still is blue. What am I doing wrong?
Edit: Sorry for the confusion, it's a 2D-Menu, the Main Menu(Topmenu items) is horizontal with vertical Topmenu's (Submenu Item).
It is because of specificity. The .Submenu class is overwritten by .Topmenu.update. To avoid this, put .Topmenu.update in front of the .Submenu class.
.Topmenu a {
color: black;
}
.Topmenu.update a {
color: blue;
}
.Topmenu.update .Submenu a {
color: black;
}
<div id='Mainmenu'>
<ul>
<li class='Topmenu update'><a href='Link1'>Link1</a>
<ul>
<li class='Submenu'><a href='Link2'>Link2</a></li>
</ul>
</li>
</ul>
</div>
The problem is from your css. it should look like this;
.Topmenu a {
color: black;
}
.Topmenu, .update a {
color: blue;
}
.Submenu a {
color: black;
}
Notice the second block has a comma and space after the first class.
Although your HTML does have an error, it should still not affect the CSS from working right. and yes you have to fix your html it does not look right. so fix from #zowie's correction.
Let me know.
Use > for the first level:
.Topmenu a{
color:black;
}
.Topmenu.update > a{
color:blue;
}
.Submenu a{
color:black;
}
Firstly, happy new year to you all! :)
Ok let's get to it. I have 5 items in my menu, and i would like to color "+" part of the word to red, choosing 2nd,3rd and 4th item of menu.
This is what menu looks like right now.
This is how the menu should look like, when its done.
I might have given a bad picture, but i think you can see the red "+" on 2nd,3rd and 4th item of menu.
This is what i've tried so far, but i can't seem to figure out the nth-child method.
#menu li:nth-child(2):first-letter a{color:red;}
Also tried this, but it colors every first letter in all 5 elements :S
#menu .nav > li > a:first-letter{color:red;}
Any help will be appreciated!
Thank you all!
I've managed to find the solution. Not sure if it's the best one, but im posting it below, so that any1 in the future can use it too, if no other solution is found
#menu .nav > li:nth-child(2) > a:first-letter
{
color:red;
}
#menu .nav > li:nth-child(3) > a:first-letter
{
color:red;
}
#menu .nav > li:nth-child(4) > a:first-letter
{
color:red;
}
Use the :not() selector to have all but one selected like this:
#menu{
background: rgb(83,83,83);
width: 100vw;
height: 40px;
}
ul{
text-align: center;
line-height: 40px;
vertical-align: central;
}
ul li{
display: inline-block;
color: white;
list-style: none;
margin-left: 25px;
}
a{
color: white;
display: block;
}
#menu ul li:not(:first-child):not(:last-child) a::first-letter{
color: red;
}
<div id="menu">
<ul>
<li>+option</li>
<li>+option</li>
<li>+option</li>
<li>+option</li>
<li>+option</li>
</ul>
</div>
I know this question already has an accepted answer, but I think there is a semantically better way of doing this. Instead of having the + symbol inside the link's markup, why not add it as a pseudo :before element? Easier to style and not dependent on your markup.
<nav>
<ul>
<li>Domov</li>
<li class="with-symbol">Naravni kamen</li>
<li class="with-symbol">Dekorativni kamen</li>
<li class="with-symbol">Keramika</li>
<li>Kontakt</li>
</ul>
</nav>
And the respective CSS:
.with-symbol:before {
content: '+';
color: red;
}
Then position it with either position: absolute; or negative left margin.
From the docs (https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Afirst-letter): A first line has meaning only in a block-container box, therefore the ::first-letter pseudo-element has an effect only on elements with a display value of block, inline-block, table-cell, list-item or table-caption. In all other cases, ::first-letter has no effect. So you will need to add display: block to your anchor tags.
I would also change the selector to:
ul li a:first-letter {
color:red;
}
as you need to select the first letter of the anchor tag, not the list item.
As a side note, it might be a better solution to use a span as suggested above or pseudo elements to insert the plus character and use a class to determine if it should be displayed or no.
Warning... not the sharpest tool in the CSS toolbox here...
I'm trying to write a tree control using ULs... and stuck on a CSS issue. To simplify the question, I boiled down the example to something that might not make sense, but the essence of the CSS issue is as simple as possible.
Consider this html:
<ul>
<li><div>should be green :)</div>
<ul>
<li><div>should be green :)</div></li>
<li><div>should be red :)</div></li>
</ul>
</li>
<li><div>should be red :)</div>
<ul>
<li><div>should be green !!!!!!!!!!!!</div></li>
<li><div>should be red :)</div></li>
</ul>
</li>
</ul>
and this CSS:
ul li{
background-color: green;
}
ul li:last-child div{
background-color: red;
}
The one item that says:
<li><div>should be green !!!!!!!!!!!!</div></li>
Appears red instead of green!!!!!
Since the div that contains it is contained in an LI that is NOT the last in the list, I expected it to use the normal selector instead of the last-child selector
Here is a fiddle for your reputation point seeking pleasure!
http://jsfiddle.net/dmd1214/5Vm58/16/
You need to use Child selector for selecting the last element(div) of li.
ul li:last-child > div{
background-color: red;
}
JS Fiddle
Make your descendant selector a child selector:
ul li:last-child > div {
background-color: red;
}
That way, it matches only the <div> elements that are children of that last <li> element.
Demo: http://jsfiddle.net/5Vm58/20/
It's because you are targeting a div with your :last-child usage.
ul li {
background-color: green;
}
ul li:last-child {
background-color: red;
}
Fiddle: http://jsfiddle.net/5Vm58/19/
I've the following navigation at http://www.roydukkey.com. The navigation is designed to have vertical separators between the parent menu and it's child menu. If you look under the 'Contact' menu-item it looks the way it's designed, however have a look under 'Projects'. The are vertical separators shouldn't exist where there aren't child items against the menu.
How can the proper design be achieved through CSS alone?
This cannot currently be achieved through CSS.
Here is the solution I've chosen:
// Naivagation Vertical Separator Counter
$("#main > ul > li > ul .level-has-sub").each(function(){
$(this).find("> ul > li")
.slice(0, $(this).find("~ li").length + 1)
.addClass("vertical-separator")
});
Them simply style those items for the vertical separator.
It's not possible with pure CSS. You would have to count the number of <li>s in the child <ul>. If you restructured the menu, you could put the separators in the child <ul> instead. Then you would either a) show the separator on the left of every <li> in the child <ul>, or use :first-child to only show it on the first.
Your CSS is minified so I cannot give you line numbers.
In you custom.css file replace
#main li li.level-open:after, #main li li.level-open~li:after {rules}
with
#main li li.level-open:after {rules}
You can't do this precisely, as CSS can't (yet) know the children count of another DOM-element.
CSS4 might be able to do this (ascend to the style's parent) in the near future: http://www.w3.org/TR/selectors4/#subject. This looks interesting too, although not pure CSS; http://demo.idered.pl/jQuery.cssParentSelector/. Maybe you can descend back down again after counting the children of the submenu, but that would be very complex to achieve with the low logical selection methods CSS has.
You could probably best do this in SASS, but then it's not native CSS anymore, and then you might as well just fallback to JavaScript.
Here's an example of how style a style of a parent itself based on how many children it "at least" has;
JSfiddle
HTML
<ul>
<li>
<ul class="submenu">
<li>Contact 1.1</li>
<li>Contact 1.2</li>
<li>Contact 1.3</li>
<li>Contact 1.4</li>
</ul>
</li>
</ul>
<ul>
<li>
<ul class="submenu">
<li>Contact 2.1</li>
<li>Contact 2.1</li>
<li>Contact 2.3</li>
</ul>
</li>
</ul>
CSS
li {
list-style: none;
display: inline-block;
border: 1px dotted red;
padding: 15px;
}
.submenu li {
display: block;
padding: 15px;
border: 0px;
border-top: 1px dotted blue;
}
.submenu li:nth-child(1) {
border: 0px;
}
/* This style only happens if the menu has 4 or more children li's */
.submenu li:first-child:nth-last-child(4),
.submenu li:first-child:nth-last-child(4) ~ li {
border-left: 1px dotted blue;
}
Good luck!
The solutions lays somewhere else then you might expect.
You have missed with expectation that on "Contacts" menuis all working well. I have added a new element just to show that the "bug" is in design of the menu.
So the problem is in the design of the drop down menu. To solve this , take a look in your css and look for
#main li li.level-open:after, #main li li.level-open ~ li:after
And delete line:
border-right: 1px dotted #7F7F7F;
Now, in order to achieve adding dotted menu you have to do change a little your php code. You can't do that in CSS. At least to my little research I couldn't find.
Create a new class - for example .dotted-right-border , and in you code, create an algorithm to add that css class to every element that will be printed on the left side of li when there is li element on the left.
Update:
Ok, then. I usually don't like to say that something is impossible, but in this case, and to my opinion here is impossible to do the change with pure CSS. Even current creating of menu items is adding level-open into HTML tag, so it would need something that will be doing around that.
There could be one more approach for this situation, for example:
To modify the class
#main li li.level-open:after, #main li li.level-open ~ li:after
and change mentioned line:
border-right: 1px dotted #7F7F7F;
Into line:
border-right: 1px dotted transparent;
and then to set border-color: #7F7F7F for every new item under sub-menu, but then you couldn't tell apparent if the sub menu has it's match on the left side, so it would then show/not show dotted border. This is just an example approach. If I explained the approach good.
It all ends up into situation - How can you tell apart if the sub menu has a parent item on the left side in order to show dotted border? And that is why I think there is no pure CSS solution. But if someone knows better, then even better.
CSS selector can not refer to children elements, the only class (pseudo) i know :empty. In your case at parent level you need information about number of children. The solution is to provide this info at design time and encode it (e.g. in class attribute).
Based on you code, for projects node you need to add info as follows:
<li class="level-has-sub limit">...</li>
<li class="level-has-sub limit2">...</li>
<li class="level-has-sub limit">...</li>
<li class="level-has-sub">...</li>
And corresponding CSS:
#main li li.level-open~li:after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: none;
z-index: 1;
}
// above is not necessary if you remove this selector from your css
/* main job */
#main li li.level-open:not([class*=limit])~li:after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: 1px dotted #7f7f7f;
z-index: 1;
}
#main li li.level-open.limit2+li:after,
#main li li.level-open.limit3+li:after,
#main li li.level-open.limit4+li:after
{
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: 1px dotted #7f7f7f;
z-index: 1;
}
#main li li.level-open.limit3+li+li:after,
#main li li.level-open.limit4+li+li:after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: 1px dotted #7f7f7f;
z-index: 1;
}
#main li li.level-open.limit4+li+li+li:after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: 1px dotted #7f7f7f;
z-index: 1;
}
As you can see, there is problem with multiple selectors like:
#main li li.level-open.limit2+li:after,
#main li li.level-open.limit3+li:after,
#main li li.level-open.limit4+li:after
You can workaround it by using coding by attribute substring, eg: limit1, limit11, limit111, and selectors [class*=limit1], [class*=limit11], [class*=limit111].
Note:
I use substring selector [class*=limit] witch is little unpredictable ;) you can change it to pair: [class^="limit"], [class*=" limit"] for better control.
Hope it helps :)
<li class="red">
<p>Home</p>
</li>
In the CSS, I'd like the bg color of the li element to change, BUT the color of the text has to change too. The problem is, even after I hover of ther li element, I have to go further and actually touch the text in order for it's color to change.
I'll be amazed if this can work.
First remove <p> tag
li.red > a:hover {
color: red;
}
li:hover {
background-color: blue;
}
li:hover p,
li:hover a {
color: yellow;
}
There are 2 things you should take into account:
<p></p> is a block level element. It is not used inside inline-element, in this case, <li></li>
Simply make your <a></a> tag to be a block level element.
So your code should be like this:
<ul>
<li class="red">
Home
</li>
</ul>
Then you could come up with the CSS like this:
.red a:hover {
padding: 10px 20px;
display: block;
background-color: #9900;
color: #FFFFFF;
}