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>
Related
I'm making a hoverable ul that displays a p element in another div.
As there is no parent selector to be had in pure CSS, I'm stuck and cannot figure out how this is supposed to work.
Fiddle won't work for some reason(for me), so here is a bin:
https://jsbin.com/yohapudimo/edit?html,css,output
My best effort was:
#infoDrop > li:hover ~ #aboutPara > p{
display: inline;
}
while trying to target a sibling div
I think it might be possible without JS... this is untested though so bear with me -- it also has to be an adjacent element, which I'm not sure is a problem or not for you?
If this doesn't work for you, then I'm afraid you'll need JS.
#myPCont p {
display: none;
color: #fff;
}
.myCont:hover+#myPCont p {
display: block;
}
#myPCont {
background: #333;
height: 300px;
width: 300px;
}
<div class="myCont">
<ul class="hoverShowP">
<li>This is my first list item</li>
<li>This is my second..</li>
<li>And this is my third.</li>
</ul>
</div>
<div id="myPCont">
<p>Heyooo!</p>
</div>
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'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 have the following code:
<div class="fp1">
<div class="col">
<div class="img" id="img1"></div>
<ul>
<li><span>Test </span></li>
<li><span>Test </span></li>
<li><span>Test </span></li>
</ul>
</div>
</div>
.fp1 .row { overflow: hidden; }
.fp1 .img { display: inline-block; float: left; width:105px; height:80px; margin:25px 0 10px 0;
background: yellow; no-repeat scroll 0 0 transparent; }
.fp1 .col { float: left; width:50%; margin:0px; }
.fp1 .col ul { margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
.fp1 .col ul span { color:#222; font-size: 0.85em; }
.fp1 .col ul li { line-height:15px; }
I created a fiddle
What I don't understand is why are the small circles that should appear to the left of the "li" missing?
Any help would be appreciated
Your problem is that jsfiddle.net automatically includes a reset stylesheet (normalize.css) that includes this:
ol,ul {
list-style:none;
}
You'll see a "Normalized CSS" checkbox in the sidebar, uncheck that and normalize.css won't be pulled in; for example:
http://jsfiddle.net/ambiguous/HQJhe/10/
That fiddle is just yours with the checkbox unchecked.
The debugging technique you should follow here is to simplify your code as much as possible. Either the problem will go away, or you will be left with a few tiny lines of code and someone will be easily able to spot the problem
I went to your JSFiddle and started removing lines of CSS one at a time. That didn't solve the problem. Then I started removing HTML. Eventually I was down to just this:
<ul><li>Why is there no circle?</li></ul>
My conclusion is that JSFiddle had some weird stylesheet that was applying to your code and removing the circle. Thank you to "mu is too short" for figuring out exactly what stylesheet and how to turn it off. But I still decided to post this because I think you could benefit from learning this debugging technique.
just use this code below:
li style="display: list-item; list-style: none"
I'm designing a custom wordpress template for some friends, and want a horizontally justified top menu. All would be fine, except that wp_page_menu outputs the list elements all in one line, which (after a LOT! of head-scratching) appears to break the formatting and removes all space between the elements. For example, the following outputs 1, 2 and 3 spaced out and then 456 all together. (Tested in Safari, Firefox and Chrome, all on mac.)
<style>
.menu {
text-align: justify;
width: 700px;
margin: 10px;
}
.menu * {
display: inline;
}
.menu span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
</style>
<div class="menu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li><li>5</li><li>6</li>
</ul>
<span></span>
</div>
I've already got a custom function editing the output from wp_page_menu to add the span after the ul, so I guess the easiest thing to do would be to extend that function to put the line breaks in as well, but if anyone's got other ideas, or can tell me why this is happening (especially that!) that would be great.
EDIT:
Have fixed it now by adding a function that inserts a space to the html (code below if anyone's interested for now or if someone comes across this in the future). Seems that was all that was necessary! Would still be interested to hear if anyone can tell me why this is needed.
// Add a space after the </li> in wp_page_menu to allow justification of the menu
function add_break($break) {
return preg_replace('/<\/li>/', '</li> ', $break, -1);
}
add_filter('wp_page_menu','add_break');
To answer your question, that's how xHTML works.
If you have the following:
testtest1
That would show up as
testtest1
And if you have the following:
test test1
That would show up as
test test1
Now, the same logic works for <li> elements, as well as various other selectors such as <img> selectors.
Have you have had a header with three images in a line, but when you tried to do this:
<img src="#" />
<img src="#" />
<img src="#" />
That will insert a space ( ) after each image, whereas having them in line would not.
Your function accomplishes exactly what you wanted. You could've done it using Javascript or CSS as well, but your solution is better. Just in case you are curious, here is how to do it with CSS:
.menu li:before {
content:' ';
}
Hope that helped.
instead of display:inline, try floating your lis left. then maybe:
no:
.menu * {
display: inline;
}
instead
.menu li{
float:left;
padding:0 5px;
list-style:none;
}
I guess i kind of embelished with the other stuff but give it a try!
If I understand it correctly - what you really need is a tabular layout.
Try adding this to the css:
.menu { display: table; }
.menu ul { display:table-row; }
.menu li { display:table-cell; }
You could just ditch the li tag altogether and just make them div's with the same class name.