When I am focusing on link a elements then the only font size is not changing bt I want to change the font size whenever I focus on link a elements of html code...
CSS:
a:focus {
outline-color: ;
background-color: aqua;
font-size: 27px;
}
HTML:
<ul>
<li>home</li>
<li>h</li>
<li>m</li>
</ul>
You probably want to use hover or active. The outline color with nothing might also be causing a syntax error.
Hover changes the element when you are over it. Active changes it when it is the current element that is about to be activated.
a:hover, a:active {
background-color: aqua;
font-size: 27px;
}
Not sure what is problem? When I replicate youre code its work just fine. Try adding '#'(dummy-link) to links href attribute
<ul>
<li>home</li>
<li>about</li>
<li>Contact</li>
</ul>
a:focus
{
outline-color: none;
background-color: aqua;
font-size: 27px;
}
Related
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 3 years ago.
I was trying to create a responsive menu but selecting a specific element worked out differently.
For example, when I selected "nav ul li" for list styles in the default size and selected "ul li" for list style in the breakpoint, it didn't work as I intended.
It was fixed when I selected "ul li" for both the default size and the breakpoint but I don't know why it fixed the issue because as far as I know, selecting "nav ul li" and "ul li" are the same thing. Could somebody help me with this?
nav {
width: 100%;
background-color: darkblue;
}
ul {
width: 80%;
margin: 0 auto;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 20px;
}
ul li:hover {
background-color: orange;
}
ul li a {
color: #ffffff;
text-decoration: none;
}
.toggle {
width: 100%;
padding: 10px 20px;
background-color: #001f44;
text-align: right;
box-sizing: border-box;
color: #ffffff;
font-size: 30px;
/* to hide toggle */
display: none;
}
/* Break Point for the toggle */
#media screen and (max-width:768px) {
.toggle {
display: block;
}
ul {
width: 100%;
}
ul li {
display: block;
text-align: center;
}
}
<div class="toggle">
<i class="fa fa-bars"></i>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Resume</li>
</ul>
</nav>
You are running into specificity issues. In CSS, if two different rules target the same element with same attributes, the rule with the more specific selector will win and cancel out the less specific rule.
Reading: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
nav ul li {/* more specific rule wins */
color: blue;
}
ul li {
color: red;
}
<nav>
<ul>
<li>The first list example</li>
</ul>
</nav>
<nav>
<ul>
<li>The second list example</li>
</ul>
</nav>
What is happing is that you are not overriding your selection in the media query.
For instance lets say you got:
CSS:
p a{
color: red
}
#media screen and (max-width:768px) {
a {
color: blue;
}
}
html:
<p> <a>Some Url </a> </p>
The media query wont override the selection for is not as specific as the prior selection.
CSS is about priorities for the more specific the higher the priority of style.
So as:
p a { some style} is more specific than a {some style} then the priority stands for the first one.
In your example, ul li is less specific than nav ul li, thats why you are not overriding the style with the media query.
Hope this answer your question.
Go to w3schools.com for CSS selection rules.
CSS is easy to start writing and really hard to maintain.
One approach to simplify maintainability and avoid specificity conflicts is BEM (Block, Element, Modifier) in which every element has a class and that class describes the element as either:
a Block
a Block Element
a Modified Block
a Modified Block Element
Eg.
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__list-item">The first list example</li>
</ul>
</nav>
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__list-item">The second list example</li>
</ul>
</nav>
This will help you entirely avoid any specificity conflicts.
N.B.
BEM is just one approach to writing CSS. Others which similarly seek to simplify maintainability and extendability are OOCSS and SMACSS.
You will find on the web nearly a decade's worth of blog posts and tutorials on any of these approaches to writing CSS.
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;
}
<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;
}
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>
I am having this issue and I am hoping that it is so simple and that is why I can not figure it out.
I want to use an image divider inbetween navigation <li> elements.
Here is my CSS:
#nav {
width:70.5%;
padding-left:29.5%;
list-style: none;
margin: 0px auto;
float:left;
background-image:url(images/bk_nav.gif);
background-repeat:repeat-x;
display:block;
text-align:center;
#margin-top:-4px;
}
#nav li {
float: left;
margin: 0px;
text-align:center;
font: 13px/100% Helvetica, Arial, sans-serif;
background-color:#cccccc;
}
.divide
{
position:relative;
float:left;
width:4px;
height:42px;
background-image:url(images/divider.gif);
}
#nav a {
color: #ffffff;
text-decoration: none;
text-align:center;
padding: 14px 25px 14px 25px;
font: 14px/100% Helvetica, Arial, sans-serif;
display: block;
text-align:center;
}
Here is the HTML:
<ul id="nav">
<li class="page-item-2 current_page_item">Home</li><span class="divide"></span>
<li class="page-item-20">Our Program</li>
<li class="page-item-10">Social</li>
<li class="page-item-13">Economic</li>
<li class="page-item-15">Environmental </li>
<li class="page-item-17">Resources </li>
</ul>
Currently I only have one divider in there because I am testing it. This code works fine in FF but IE is destroyed by it. Anyone shed some light on this frustrating situation?
UPDATE:
The one is right and the other is not. I was able to create the same error in FF so you can see both. (Just moved the <span>)
<ul>
<li>list item</li>`
<li class="divider"></li>
<li>list item 2</li>
</ul>
Then, in order to make the divider appear closer to the list items, just adjust the margin/padding of the .divider class
First thing's first:
A span cannot be a direct child of a ul element. It is not standard HTML, and so there's no telling what might happen. Only lis can be children of uls.
Suggestion:
I would, were I you, put the divide class on an li instead. That way, you have standard HTML at the very least, and maybe it'll even fix the page. Other than that, I would need a link to a demo as Bears will eat you suggested to be of any assistance.
I'm not entirely sure what "entire background" means, but I'm going to suggest that you use background-position and background-repeat to help. Read through these and it should help you figure out what you'd like to do.