I have this navigation links and upon hovering the last link (styled as button), I want it to have a property of bottom border of color pink instead of brown upon hover to complement the color red button. Your help is appreciated. Thanks in advance!
.header-nav a:hover {
border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/
}
.header-nav a:last-of-type:hover {
border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
}
<nav class="container header-nav">
<ul>
<li>Home</li>
<li>Cupcakes</li>
<li>Cakes</li>
<li>Events</li>
<li>Order Now!</li>
</ul>
<br>
</nav>
Here's the fiddle:
https://jsfiddle.net/ssqLspsn/
i DID IT!!! https://jsfiddle.net/Please_Reply/9hk6okpd/2/ hope this is what you want!!!
.header-nav a:hover {
border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/
}
.header-nav .btn:hover {
border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
}
I DID IT!!! Look here https://jsfiddle.net/Please_Reply/9hk6okpd/2/ hope this is what you want!!!
.header-nav a:hover {
border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/
}
.header-nav .btn:hover {
border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
}
Try to put some class to the button (last element)
You css is fine although
like
<div class="header-nav">
<a>some text</a>
<a>some text</a>
<a class="btn">some text</a>
</div>
css
header-nav .btn:hover {
border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
}
If you want to keep your css selectors, you should select on li, not a
Raplace .header-nav a:last-of-type:hover with .header-nav .li:last-child a:hover
maybe you will put id or class name for last li and make css code the specific id :)
The best thing to do when checking which css is applied on hover is to have the hover attribute active from the console.
You can do this both in firefox and chrome by going to the inspector.
Here is the guide to seeing how to activate the hover attribute
See :hover state in Chrome Developer Tools
As for your specific problem it would help if you also posted your html, because css will not work if you're applying the style to a wrong element.
.header-nav li:hover {
border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/
}
.header-nav li:last-of-type:hover {
border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
}
Good Luck!
Related
If i have a ul, how do i set a border-bottom on all the li items except the last one? I'm also trying to make the width of the border 180px. here's my code:
HTML
<ul class="sideNav">
<li>History</li>
<li>Mission</li>
<li>Associations</li>
<li>Careers</li>
</ul>
CSS
.sideNav {
margin:0;
padding:0;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
width:216px;
background-color:#017dc6;
}
.sideNav li {
list-style-type:none;
text-align:center;
text-transform:uppercase;
width:180px;
}
.sideNav li a {
border-bottom:1px solid #80bee3;
width:180px;
color:#ffffff;
text-decoration:none;
display:block;
padding:18px;
}
Dec 13th, 2018: Note that there is no need to use this solution in today's modern browsers. You should feel free using the answer below mine li:not(:last-child) { border-bottom: 1px solid red; }
Without using JavaScript and not having to support IE7 and below (IE8 fails on the second one) there are three options you can use: :first-child, :lastchild and the + selector:
:first-child
li { border-top: 1px solid red; }
li:first-child { border-top: none; }
:last-child
li { border-bottom: 1px solid red; }
li:last-child { border-bottom: none; }
+ selector
li+li { border-top: 1px solid red; }
The problems arise if you need to support IE8 and your design doesn't allow you to put a border on the top of your elements as opposed to the bottom.
EDIT:
The fix to your width issue is that you're adding 180px to 2*18px of the a element, remove the left right padding, and set padding: 18px 0; and you'll be golden. (updated jsfiddle: http://jsfiddle.net/NLLqB/1/)
Here's a jsfiddle of it: http://jsfiddle.net/NLLqB/
Use :not(:last-child).
.sideNav li:not(:last-child) a {
/* your css here */
}
One way: You can override for the last one using a rule like below with :last-child (Since you tagged css3):
.sideNav li:last-child a {
border-bottom:0px; /*Reset the border for the anchor of last li of this ul*/
}
Demo
There are polyfills available for IE8, but if you can provide a classname for the last one and apply rule to it to reset the style would be of better support, rather than using css3 (if your intention is to support older browsers as well).
if you are using scripting language like jquery you can easily add a class to the last child as jquery takes care of cross-browser compatibility.
You can also use in-line CSS to correct this problem.
<li><a style="border-bottom:none" href="/careers.asp">Careers</a></li>
This will remove the border from the "Careers" link. Note that it will only work if you put that code in the <a> tag since that is what the border is being applied to, not the <li>.
The downside of this is that if you add something to the list, then the second-to-last list item will have no bottom border, and the last will.
Not the best solution, but an alternative one that accomplishes the same thing. Cheers!
How do I get a CSS selector to skip over <dd> and apply to all the <dt> only? I am trying to only apply border-bottom to the first <dt>.
I tried: dl > dt:not(:last-child), but that didn't work either.
CSS:
dt:not(:last-child) {
border-bottom: 5px solid #dddddd;
}
HTML:
<dl>
<dt>Dates of Operation</dt>
<dd style="display: none;"></dd>
<dt>Dates of Operation</dt>
<dd style="display: none;"></dd>
<dt>Dates of Operation</dt>
<dd style="display: none;"></dd>
</dl>
You are looking for the :first-of-type CSS pseudo-class:
dl > dt:first-of-type {
border-bottom: 5px solid #dddddd;
}
See demo fiddle here.
As always, make sure you check for target browser support before using it. If you have a large audience, the standard way of achieving what you want is using a regular class.
Use :first-child selector
dl > dt:first-child {
border-bottom: 5px solid #dddddd;
}
Fiddle: http://jsfiddle.net/2SZ9f/
you can use first-child
It works exacly the same as last child but it's the first child. should work fine. Here is a codepen :
http://codepen.io/anon/pen/eFkbq
It would depends on which is the special element. If the first is the only one with border then you should use
dt:first-child{
border-bottom: 5px solid #dddddd;
}
But if you want to have border on every child except the last one, then try this:
dt {
border-bottom: 5px solid #dddddd;
}
dt:last-child {
border-bottom: none;
}
This will override the border bottom style added to dt elements.
If you only have 2 elements then you can add id, class or first-child. If the last child is the special one then add the css for it and you may have many other dt elements.
I have a simple nav list. Typical set up, where the active page li item has the id "active".
I want to be able to keep the active page as a link, have a solid border underneath, but have a dashed border on the li items without the "active" id.
How can I achieve this without having the active tag being overwritten with the dashed border-bottom?
Here's the code for the list:
<div id="nav_bar">
<ul id="nav_list">
<li id="active">About</li>
<li>Design</li>
<li>Photography</li>
</ul>
</div>
jsFiddle Example
Since borders are already being applied to each a, make the :hover only apply to li that are not #active by using :not().
Change:
#nav_list li a:hover{
border-bottom:1px dashed #666;
}
#active a{
border-bottom:1px solid #666;
}
#nav_list li#active a:hover{
border-bottom:1px dashed #666;
}
To:
li#active a{
border-bottom:1px solid #666;
}
#nav_list > li:not(#active) a:hover{
border-bottom:1px dashed #666;
}
DEMO:
http://jsfiddle.net/FaESR/1/
NOTE: Make sure to use class instead of id if you plan on having more than one instance of #active, since id must be unique!
Happy coding!
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/
I have links like:
Link text<span>Link sub-text</span>
When hovering I need that text inside span is not decorated with underline (but main link text is). Is it possible?
I've tried:
a:hover span {text-decoration:none;}
This is not working.
Is there any solution for this?
Add link text (text you want to be decorated with underline) inside <span> and the sub-text outside as normal link text, like:
<span>Link text</span>sub-text
To decorate Link text use:
a:hover {
text-decoration:none;
}
a:hover span {
text-decoration:underline;
}
A simple solution is to use the color and border properties, instead of text-decoration. You need to set text-decoration: none first, and then use border-bottom as the underline for all your links.
style.css
a, a:link, a:visited
{
color: #11bad3;
text-decoration: none;
border-bottom: 1px solid #11bad3;
}
a:hover, a:active
{
background: #00a9c2;
border-color: #00a9c2;
color: #fff;
}
print.css
a, a:link, a:visited
{
border-bottom: 0px;
}
index.html
<link rel="stylesheet" href="assets/css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="assets/css/print.css" type="text/css" media="print">
I know this is an old post, but since I just had the same problem, and came up with a solution, I figured I would write it anyways.
Instead of trying using text-decoration: underline, instead just use border-bottom: 1px solid #000, this way, you can simply say border-bottom: none,
Another solution is to use colors instead of underlines as your identifier:
<a id="outer-link" href="#">
Outer text <span id="inner-text">inner text</span> more outer text.
</a>
<style>
a { text-decoration: none; }
#outer-link:hover { color: green; }
#outer-link:hover #inner-text { color: red; }
</style>