I am trying to replicate an navigation bar based off an example I saw. If someone could explain what it does that would be great.
https://i.stack.imgur.com/3WB0Y.png
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
It is an 'Descendant Selector', meaning it whatever is inside of 'topnav' class with the tag 'a' will be affected by the written css rules. You can refer to https://www.w3schools.com/css/css_combinators.asp for more information
It targets the anchor inside the topnav element
.topnav a {
color: red;
}
<div class='topnav'>
<a>I am the link</a>
</div>
It's basically the tag inside a HTML element with the class name topnav. Here's an example :
<div class="topnav">
About
</div>
You can see the " < a > " there, in your CSS code we use .topnav a, it's not the best term to use but we can say that the .topnav a just grabs the childs of the class topnav.
Related
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.
I would like to ask anyone who could help me where is the difference between this two CSS tags.
.bmenu:hover li a{...}
VS
.bmenu li a:hover{...}
Thank you very much for help and sry for my bad english.
Edit 1: I would like to ask for explanation mainly, how do they both work, because in the first case, there is a "li a" behind the :hover. What does it mean please? Thx
To explain this, I'll use this example code:
<div class="bmenu">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
if you use .bmenu:hover you're saying you want the CSS to apply when you hover the ENTIRE .bmenu div.
When you say .bmenu li a:hover you are saying that you want to apply the CSS when you hover the a tag within a .bmenu li.
Here's a quick example I made, the top is using the .bmenu:hover method, and the bottom is using the li a:hover method. fiddle here.
In the first case an <a> will apply styles when you hover .bmenu, in the second case - when you hover the <a> itself. Take a look at these two blocks:
.bmenu1, .bmenu2 {
width: 200px;
height: 100px;
margin: 10px;
padding: 40px;
background-color: orange;
}
a {
display: block;
height: 100%;
width: 100%;
background-color: firebrick;
}
.bmenu1:hover a {
background-color: lightblue;
}
.bmenu2 a:hover {
background-color: lightblue;
}
<div class="bmenu1">
</div>
<div class="bmenu2">
</div>
i have a main "div" with multiple divs and "a" tags and i wanted to set a "template like" css to make them all look the same, but some of the A tags need to be different so i thought about making it like this:
<div class="main">
CLick A
<br/>
CLick B
<br/>
CLick C
....
</div>
and on the css:
.main a{
/* Links Scheme */
}
.exception{
/* particular link css */
}
But the browser gives preference to my "template" instead of the particular class. shouldn't the class be the most important or am i missing something?
FIDDLE Link
PS: without the use of "!important" tag please
This is an issue of specificity. Since .main a includes a class and a tag name, it is more specific, and thus gets higher precedence than just a class name.
So, to solve it, use .main .exception for your exception.
.main a is more specific then .exception. I think what you are going for is:
.main a{
/* Links Scheme */
}
.main a.exception{
/* particular link css */
}
In css, orders are also determined by how specific the selector is, so try changing .exception to .main a.exception.
jsFiddle: http://jsfiddle.net/jdwire/DFNyW/2/
you can use :not() pseudo-class, The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class. so you can fix code like this:
.main a:not(.exception){
color: #3b5998;
outline-style: none;
text-decoration: none;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
.exception{
color: #0498ba;
font-family: Verdana, sans-serif;
font-size: 30px;
letter-spacing: 2px;
margin: 0 0 0;
padding: 0;
font-weight: bold;
text-decoration: none;
}
<div class="main">
CLickA
<br/>
CLickB
<br/>
CLickC
</div>
I'm learning CSS and html and am stuck on retaining the look of the hover/active state after an item has been clicked. I've looked at several posts on this site and haven't been able to apply the lesson to my application. I also found a solution here http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ but it didn't work for me (I'll assume it's my fault).
Another source suggested using a span class which is what I'm currently trying. I want to have the same hover color (#fff), weight (bold), and background image in use when a menu item is selected to show the user exactly where they are (this is in the secondary sidebar nav and comes in to use on those pages where the main nav has a dropdown with multiple otions). The only characteristic that's working for me is the bold text. You can see the work in progress here:
http://www.mentalwarddesign.net/dynamec/About/index.html
I'm assuming the class I've created in the span is being overridden, but I'm at a loss as to the remedy. Any and all help would be greatly appreciated.
Following is the code for the li and then the corresponding CSS. Thanks in advance!
<ul class="nav">
<span class="chosen"><li>What We Do</li></span>
<li>How It Started</li>
<li>Who We Are</li>
<li>What We Know</li>
</ul>
.chosen {
font-weight: bold;
color: #ffffff;
background-image: url(../imgGlobal/bulletRight.jpg);
background-repeat: no-repeat;
display: block;
padding-left: -12px;
background-position: 168px;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
background-color: #fff;
}
ul.nav {
list-style: none;
}
ul.nav li {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #464646;
height: 50px;
background-color: #000;
}
ul.nav a, ul.nav a:visited {
display: block;
width: 160px;
text-decoration: none;
padding-top: 12px;
padding-right: 5px;
padding-left: 15px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #ffffff;
font-weight: bold;
height: 38px;
background-image: url(../imgGlobal/bulletRight.jpg);
background-repeat: no-repeat;
background-position: 168px;
}
Ed, the CSS selector :active means "Being activated (e.g. by being clicked on)", not "Having an href attribute that resolves to the URL of the current page". You can use server-side logic to insert a class=”chosen” or similar. E.g:
<li class="chosen">What We Do</li>
And, CSS style: ul.nav li.chosen a { }
There is another way to do it as mentioned on the tutorial link you gave, however it is not a good example.
Well first of all, you cannot wrap an li inside of a span. The only direct descendent of a ul is a li. You can put the class chosen directly on to the li and it works just fine.
<ul class="nav">
<li class="chosen">What We Do</li>
<li>How It Started</li>
<li>Who We Are</li>
<li>What We Know</li>
</ul>
Put the chosen class in the li element itself. Drop the span altogether.
EDIT:
Sorry, in the a element, i meant to say.
A span is a tag, a class is just an identifier. They don't really have anything to do with one another except a class can be used to apply a style to a span but that's true of any tag.
In your case you're trying to put a span (an inline element) around an li (a block level element). In HTML inline elements should not contain block elements.
You should be able to just do it like this: EDIT fixed based on the actual CSS
<li>What We Do</li>
Is there a reason my below CSS only half works?
div.share
{
position:relative;
top: -4px;
left: 25px;
font-family:Tahoma;
background-color:#000000;
font-size:11px;
font-weight:bold;
}
/* share link css */
a.share:active
{
color: #000000;
}
a.share:hover
{
color: #FFFFFF;
background-color:#000000;
text-decoration: none;
}
The div.share CSS is all working but the CSS for the active and hover is not
CSS is valid, but make sure the link does have the "share" class, if its in the DIV, change the css to:
div.share a:active
{
color: #000000;
}
div.share a:hover
{
color: #FFFFFF;
background-color:#000000;
text-decoration: none;
}
adding your html would make this easier.
I can only guess that you have a <div> with class='share' and no <a> tag with the same.
e.g., does your html look like:
<div class='share'>
<a class='share' href='http://yoursite.com'>Your site</a>
</div>
or
<div class='share'>
</div>
...
<a class='share' href='http://yoursite.com'>Your site</a>
If it's the first, then
div.share a:hover {
...
}
would make more sense.
If it's the second, then the selector looks fine... though it might be better to choose different, but appropriate class names.
Use div.share a:active and div.share a:hover.
The way you have it right now it is looking for an <a> tag with a share class applied directly. However the share class is on the outer div.
Can you show us an HTML snippet using this CSS? Is it really the <a> tag that has the share class or is it nested inside the <div class="share">?