This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed last year.
.top-menu {
margin: 50px auto;
padding: 0;
list-style: none;
width: 610px;
height: 35px;
box-shadow: 0 3px 4px #8b8b8b;
background-color: #dadada;
}
.top-menu li {
float: left;
border-right: 1px solid #929292;
}
.top-menu li a:link {
color: black;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
height: 35px;
line-height: 35px;
}
.top-menu li a:visited {
color: black;
}
ul li a:hover {
background-color: #555;
color: #fff;
}
<head>
<meta charset="UTF-8">
<title>pseudo selecotor</title>
</head>
<body>
<nav>
<ul class="top-menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
<li>menu6</li>
</ul>
</nav>
</body>
i run this page,
if hover on menu, text color is black.
but in css, hover's text color is white.
if i change hover's selector
from ul -> to .top-menu
text color is white.
Is this because I gave black as class selector and white as tag selector?
Is it because the class is applied after applying the tag?
It's because classes have higher specificity value than Elements and Pseudo Elements. In your case .top-menu have higher specificity than the element ul, therefore its style is followed/used. Refer to this table for specificity:
More on specificity here.
Related
So I'm trying to study in advance about css/html. I wanted to get rid of the extra space after the navigation pane and i can't remove it. can someone help me? thanks. also I'm having a hard time putting some elements on every section and putting some animation in it(any recommendations?)
**/* what line should i edit*/**
body {
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
box-shadow: 0px 0px 0px #dedede;
}
h1 {
text-align: center;
padding: 50px 0;
font-weight: 800;
margin: 0;
letter-spacing: -1px;
color: inherit;
font-size: 40px;
}
section {
height: 100vh;}
nav {
width: 100%;
margin: 0 ;
background: #fff;
padding: 0px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;}
nav ul li {
display: inline-block;}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 ;
}
{
nav ul li a,
nav ul li a:after,
nav ul li a:before
transition: all .5s;
}
nav ul li a:hover {
color: #555;}
<html>
<head>
<title> Main Page </title>
<link rel="stylesheet" href="navpanecss.css">
</head>
<h1> MY WEBSITE </h1>
<nav class="stroke">
<ul>
<li>Home</li>
<li>About</li>
<li>Downloads</li>
<li>More</li>
<li>Nice staff</li>
</ul>
</nav>
<section style="background: #D7FFF1">
<article>
</article>
</section>
<section style="background: #aafcb8">
<nav class="fill">
</nav>
</section>
</section>
<section style="background: #FFA69E">
<nav class="fill">
</nav>
</section>
</html>
You can use float: left; on nav,
or margin: 0 0 5px; on ul.
According to w3schools UL element has default of 1em in margin on both the bottom and the top.
Easy solution is to specify in your CSS for all UL element to be with 0 margin like so
ul {
margin: 0; // or margin: 0 0 5px; like Medda86 suggested
}
Or if the default marging is good for all other use-cases just add it to the nab UL selector that you already have
About placement and animation, do you want to elaborate more about what will trigger an animation and what element would you like to have the animation?
Simple way to remove those default styles for <ul>, add styles margin:0;padding:0; into the ul tag.
Like this
ul {
margin: 0; // removing default margin style
padding: 0; // removing default padding style
}
If you want to add some animations when the mouse hovers on links,
Here's the ref link - https://ianlunn.github.io/Hover/
I hope this is helpful!
I want to disable the border on my last anchor tag in my nav bar. I can get this working okay on other elements with only single selectors. How can I get this to work on a descendant selector?
nav a {
display: block;
float: left;
width: 200px;
text-decoration: none;
color: white;
border-right: 1px solid white;
background-color: purple;
padding: 0.2em 0.6em;
}
nav a:last-child {
border-right: none;
}
<nav>
<ul>
<li>Home</li>
<li>Reviews</li>
<li>Photos</li>
<li>Music links</li>
</ul>
</nav>
nav a:last-child will target all anchors that are the last child of their parents.
All your anchors are the last child of their <li> parents, so they're all targeted.
You should target the anchor of the last li instead, which you can do with nav li:last-child a.
Okay so I'm using the Bootstrap's nav panels and I have them fixed to the top along with an image bar. The problem is that I cannot remove the bottom-border from it no matter what I try. Here is the code as it is:
.header-wrapper {
font-family: 'Oswald', sans-serif;
}
.top {
background-color: #2960f7;
margin: 0;
padding: 5em 0 4em 0;
width: 100%;
position: fixed;
z-index: 999;
}
.top h1 {
text-transform: uppercase;
margin-top: auto;
margin-bottom: auto;
text-align: center;
color: #fff;
}
.nav-tabs {
border-bottom: none;
position: fixed;
top: 124px;
background-color: #2960f7;
color: #fff;
border-color: #fff;
z-index: 1000;
}
.nav-tabs .active {
color: #2960f7;
}
.nav-tabs li a:hover {
background-color: #fff;
color: #2960f7;
}
.nav-tabs li, .nav-tabs li a {
color: #fff;
}
And the HTML of the tabs and header:
<div class="header-wrapper">
<div class="top">
<h1>Title</h1>
</div>
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Skillset</li>
<li>Work History</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
When I look at it I see the line in the CSS element in Chrome that shows the .nav-tabs {border-bottom: 1px solid #ddd}.
JSFiddle: https://jsfiddle.net/ghstet23/3/
The long and the short, how can I get that bottom border to go away if setting .nav-tabs to bottom-border: none; won't work?
I had to add the following code to the head
<style>
.nav-tabs {
border-bottom: none;
}
</style>
If by bottom border you mean the underline under your nav options you can use text-decoration: none; like so in your css:
.nav-tabs li, .nav-tabs li a {
color: #fff;
text-decoration: none; /* Add this */
}
On the bootstrap.min.css there is a border set on hover
.nav-tabs>li>a:hover {
border-color: #eee #eee #ddd;
}
On your local stylesheet after you load bootstrap add this to override the bottom border
.nav-tabs>li>a:hover {
border-bottom-color:#fff;
}
To remove the white border at the bottom
.nav-tabs { border-bottom: none; }
Check it here
JSFiddle
Remember, styles are inherited. Start butchering it from the top-parent down to find your anomalies.
For example, if you have a div inside a div inside a wrapper div, and you apply a border to the wrapper, both inner divs will get borders also.
In that example, if you are like "hey wtf, I only wanted the parent to have a border." Then, you would add "border: none;" to BOTH inner divs.
A person would also be interested in:
http://www.w3schools.com/cssref/sel_element_gt.asp
eg:
div > div > * {
border: none;
}
Select all child elements recursively in CSS
In my navigation bar, the links to other pages are placed underneath each other.
The links change by background-color when you hover them. Now I want it to hover full screen.
I already tried by setting padding-left and padding-right:auto, but that just doesn't work as I expect.
I don't want to add a fixed measurement(ex. padding-left: 100px; padding-right:100px;) because then it won't be responsive anymore when I minimize or enlarge the browser.
How can I do this?
Sorry I don't want it to hover fullscreen but to hover the size of the <div>.
HTML:
<div id="website">
<nav>
<ul>
<li>wie</li>
<li>hoe</li>
<li>wat</li>
<li>contact</li>
</ul>
</nav>
</div>
CSS:
body {
font-size: 62.5%; /* 16px*62.5%=10px */
font-family: Cabin, Arial, sans-serif;
color: black;
background-image: url(../images/ruitjesweb.svg);
}
#website {
max-width: 960px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
nav {
background-color: white;
}
nav li {
padding-top: 15px;
padding-bottom: 15px;
font-size: 1rem;
text-transform: uppercase;
}
nav a:link, nav a:visited, nav a:hover, nav a:active {
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
color: black;
background-color: red;
}
nav a:hover {
background-color: green;
color: white;
}
If I understand your question right, all you need to do is add the display: block attribute to your <a> elements, e.g. like this:
nav a:link, nav a:visited, nav a:hover, nav a:active {
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
color: black;
background-color: red;
display: block; /* <-- add this line */
}
This will cause the links to be rendered as block-level elements, which will, by default, take up the entire width of the <li> element containing them.
Here's a demo of the result on JSFiddle. In the demo, I also added display: block (instead of the default display: list-item) to the <li> elements to get rid of the bullets, and padding: 0 to the <ul> to get rid of the indentation. The result is that all these elements, down to the <a>s, inherit the full width of the enclosing <div>.
Ref this tutorial: https://www.servage.net/blog/2009/03/20/create-a-cool-css-based-drop-down-menu/
I used an external stylesheet, and simply put #menu before each CSS item, like this:
#menu ul{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;}
or:
#menu ul li{
display: block;
position: relative;
float: left;}
But, when i reference with #menu, the menu doesn't render properly. It leaves the parent 'li' untouched by CSS.
http://jsfiddle.net/UGW2L/
Any ideas?
Thx,
Dave
Your HTML is this:
<ul id="menu">
Which means your CSS needs to be this:
ul#menu
Your current CSS is looking for an 'LI inside of a UL that is inside of some other element with an ID of MENU'
#menu ul targets this (any ul inside of an element with id='menu')...
<div id="menu">
<ul> <!-- <<-- this element is the target -->
...
</ul>
</div>
(div is just an example, any element with id="menu" can be used above)
ul#menu targets this (the ul with id='menu')...
<ul id="menu"> <!-- <<-- this element is the target -->
...
</ul>
Edit as per comments:
Quote: "...i am missing the 'box' around the parent node."
I think the node to which you refer is the <li>, just inside the parent <ul id='menu'>, and you have not targeted it anyplace at all.
Just add ul#menu li a to your box styling. (Note the comma. It separates two totally unique selectors sharing the same styling.)
ul#menu li a,
ul#menu ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
http://jsfiddle.net/cWpEg/1/
See the difference?
ul#menu is the parent.
ul#menu li is the first item inside the parent.
ul#menu li a is the link inside the first child of the parent.
Since ul#menu li targets any & all <li>'s that are children of the ul#menu parent, you would only need the one selector...
ul#menu li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
http://jsfiddle.net/cWpEg/2/
Also note how it's the full width of the screen.
To target & style just the parent, add something like this.
ul#menu {
display: block;
position: relative;
float: left;
list-style: none;
}
http://jsfiddle.net/cWpEg/6/