Can anyone see what I am doing wrong here?
I have some text elements inside an <a> which I want text-decoration:none on when the <a> is hovered over. See HTML below, which I believe should work, but when I mouseover that <a> the text is still underlining child <h2> and <p>.
HTML
<a href="" class="link-box">
<div>
<span class="icon-stat"><i class="fa fa-users"></i></span>
<h2>Membership Management</h2>
<p>Some text here</p>
</div>
</a>
CSS
a.link-box:HOVER h2, a.link-box:HOVER p {
text-decoration: none;
}
a:hover{
text-decoration: none;
}
Try it
http://jsfiddle.net/L3pxr0tx/
Related
I have an a tag and a li inside it. The a tag colors the list items innterText. How can I nullify its effects on the color of its content and also remove the underline?
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>asd</li>
</ul>
</body>
</html>
It is invalid to have <a> inside <ul> tag in the way you did, and it's also won't pass the W3C validation. However, If I understand your question, you may try this:
<ul>
<li>
<a href="#">
<ul>
<li>asd</li>
</ul>
</a>
</li>
</ul>
In order to remove the underline, you can do:
ul li a {
text-decoration: none;
color: #b61c1c; /* For Example */
}
Fiddle
Try this:
a {
background-color: transparent;
}
a:hover {
text-decoration: none;
}
You can style it like this:
<a style="text-decoration: none; color: #TheColorYouWant"></a>
Use CSS. this removes underlines from a and li elements:
a, li {
text-decoration: none !important;
}
Just add your style according to your requirements inside this class "a:-webkit-any-link". for example if you want to remove underline then just add "a:-webkit-any-link{text-decoration: none;}".
Note: Here we are using '-webkit-' for Chrome browser.
I have a problem with w3css. When I add a link to a w3css navigation bar, it will come with a line break.
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet">
<div class="w3-bottom" style="margin-bottom: 1px">
<ul class="w3-navbar w3-red" style="float: clear;">
<li style="margin-left: 2px">
Powered by w3css and fontawesome |
</li>
</ul>
</div>
I would like everything to be on one line. I hope you can help me, thanks. :)
//Cripi
This is a snippet of code that comes from the W3 css file you've included
.w3-navbar li a, .w3-navitem, .w3-navbar li .w3-btn, .w3-navbar li .w3-input {
display: block;
padding: 8px 16px;
}
If you edit the display property on that to be inline-block then things work as you'd expect.
Here is the code and an example link
.w3-navbar > li > a {
display:inline-block !important;
}
You need the "!important" to overwrite their stylesheet which would have priority otherwise.
http://codepen.io/hoonin_hooligan/pen/Mpwqwm
You have to change the display: block behavior to display: inline behavior. (And remove the padding to make it look less weird.) I used !important to make sure the browser accepts that specific value; you should replace this with a higher specificity selector, the same specificity selector later in the pageload so it overwrites the old value or change the css file of the current selector.
.w3-navbar li a{
display:inline !important;
padding: 0px !important;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-bottom" style="margin-bottom: 1px">
<ul class="w3-navbar w3-red" style="float: clear;">
<li style="margin-left: 2px">
Powered by
<a href="https://www.w3schools.com/w3css/">
w3css
</a> and
<a href="http://fontawesome.io/">
fontawesome
</a> |
</li>
</ul>
</div>
I have this html code:
<div class='ui'>
<h3 class='title'>
<a href='#'>Link to Header</a>
</h3>
</div>
<a href='#'>Another link</a>
I want to set a CSS style for all anchors a, but not the one that are into an h3 element that is parent of div.ui. I cannot add a class to the anchor a into h3 element.
I try this one:
a:not(:parent:parent.ui){color:#dedede;}
but this not work.
Any solution?
As Kobi noted in a comment, there is no such :parent selector.
Instead I suggest you style all a tags, then style a tags within h3 tags within a different rule:
a {
color: #dedede;
}
.ui h3 a {
color: another color;
}
I got a problem for you to solve, as you know.
I ripped off all my hair trying to figure out why the heck last-child isn't working.
I tried to remove border-right with last-child but for some reasons, it didn't work out.
Here's is the link
Your selector is #countdown .num:last-child.
Your HTML is
<ul ID="countdown">
<li> <div ID="days" class="num">00</div> <div CLASS="text">days</div> </li>
<li> <div ID="hours" class="num">00</div> <div CLASS="text">hours</div> </li>
<li> <div ID="mins" class="num">00</div> <div CLASS="text">minutes</div> </li>
<li> <div ID="secs" class="num">00</div> <div CLASS="text">seconds</div> </li>
<div class="clear"></div>
</ul>
Think: is .num the last child of its parent? Answer: no.
Your selector should be more like #countdown > li:last-of-type .num, selecting .num inside the last li in #countdown.
Note that in this case last-of-type must be used rather than last-child because you've got that <div class="clear"></div>, which is invalid HTML (you can't have a div directly inside a ul).
The main reason why the last-child is not working because in your #countdown UL the last-child is <div class="clear"></div> not LI. So it's better to use last-of-type instead of last-child. Like this:
#countdown li:last-of-type .num,
#countdown li:last-of-type .text{
border:0;
}
Check this http://jsbin.com/apuhep/4/edit#html,live
Inside your ul element, there is a div element after the last li element. This is invalid markup and may have unpredictable effects. Moreover, it probably makes browsers treat the div element the last child of the ul element.
Here is my UI design
<div>
<ul>
<li>
<a></a>
</li>
</ul>
</div>
I want to create a menu.
The text for the anchor will be set on run time and can be of any length but I don't want text to be wrapped. any idea how can I solve this.
To prevent text from wrapping using a CSS rule, use the following:
ul li a {
white-space: nowrap;
}