it its possible to select an parent Element by a specific class?
For an example i have an HTML-List:
<ul>
<li>Entry 1</li>
<li>Entry 2</li>
<li class="selected">Entry 3</li>
<li>Entry 4</li>
</ul>
All Elements has an bottom border:
ul li {
border-bottom: 1px solid #FF0000;
}
ul li.selected {
border-bottom: 1px solid #0000FF;
}
How i can tell over CSS that the color of the previous element is blue?
For little example (i know that :previous-child is not valid/exists but it's an little example):
ul li.selected:previous-child {
border-bottom: 1px solid #0000FF;
}
Here is an fiddle: http://jsfiddle.net/3W7PQ/
CSS 4 will allow this with the subject indicator, but there's no way in CSS as it exists today to select an element by reference to following elements.
The usual workaround is to have whatever generates your page specify the relationship itself. So, for example, you might have <li class="before-selected"> followed by <li class="selected">.
Related
I was trying to make dropdown menu using only css, however it doesn't work in my case.
It's kinda working when I don't put position:absolute at .dropdown_content in CSS, but even when I do that, dropdown doesn't work.
HTML:
<nav>
<ul>
<div class="dropdown">
<li>Game order</li>
<div class="dropdown_content">
Half-life
Half-life 2
Half-life EP1
</div>
</div>
<li>Portal series</li>
<li>Half Life Alyx</li>
</ul>
</nav>
CSS:
.dropdown {
position:relative;
display:inline-block;
}
.dropdown_content {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
min-width: 160px;
display:none;
}
.dropdown_content a {
color:white;
text-decoration: none;
display:block;
padding: 12px 16px;
}
}
.dropdown:hover .dropdown_content {
display: block;
}
To keep things simple, I have reduced your code to a bare minimum.
I'm not sure exactly how you want it to look, but here's a possible solution.
When making css only menu's I try to stick to a nested list of <ul> and <li>'s.
This makes it clearer to read, and keeps the semantics in order.
Ther is no need for container divs within. (like the <div class="dropdown_content"> in your code)
The HTML is a nested list. Initially we hide the nested ul, and only show it when it's parent is hovered over. By using .dropDown li:hover>ul you only target the ul that is DIRECTLY under the hovered li. That way you dan nest as deep as you want.
.dropDown ul {
display: none;
position: absolute;
background: white;
border: 1px solid red;
}
.dropDown li:hover>ul{
display: block;
}
<ul class="dropDown">
<li>Game order
<ul>
<li>Half-life</li>
<li>Half-life 2</li>
<li>Half-life EP1</li>
</ul>
</li>
<li>Portal series</li>
<li>Half Life Alyx</li>
<li>deeper nesting
<ul>
<li>level 1</li>
<li>more here
<ul>
<li>level 2</li>
<li>more here
<ul>
<li>level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Consider this HTML:
<li role="presentation">Home </li>
<li role="presentation">About Us</li>
<li role="presentation">Contact Us</li>
<li role="presentation">Gallery</li>
I would like to know how I can add borders around each button in a light blue or blue color.
It's pretty easy, just add the following rule:
a {
border: 1px blue solid;
}
And here is the snippet:
a {
border: 1px blue solid;
}
<ul>
<li role="presentation">Home </li>
<li role="presentation">About Us</li>
<li role="presentation">Contact Us</li>
<li role="presentation">Gallery</li>
</ul>
Reference this guide here https://www.w3schools.com/css/css_border.asp
add a class to all of the buttons and add border attributes to it.
In your html file
<a href="index.php" class="border">
In your style file (or styles in header)
.border{border: 2px solid #0000FF;}
You could also do this inline but head over to w3schools to learn about that
You can just add a border to the a element and with padding make it farther away from the words. Displaying the li elements as inline block will make them stay on the same line. Since I added the border on the a element, that means that the whole area inside the border is clickable.
a{
border:2px solid lightblue;
padding:10px 20px;
text-decoration:none;
}
li{
display:inline-block;
}
<li role="presentation">Home </li>
<li role="presentation">About Us</li>
<li role="presentation">Contact Us</li>
<li role="presentation">Gallery</li>
Rob,
You should be able to add the following code in your CSS.
ul li {
border-bottom:1px solid blue;
}
li {
display:inline-block;
}
<ul>
<li>Border</li>
<li>Bottom</li>
<li>Blue</li>
</ul>
You can change the border attributes. ie
ul li {
border-bottom: 5px solid green;
}
li {
display:inline-block;
}
<ul>
<li>Border</li>
<li>Bottom</li>
<li>Green</li>
</ul>
etc.
You can make other styling changes but your question the "border-bottom" attribute might be what you're looking for.
Hope this helps.
I've made a fiddle that might help: https://jsfiddle.net/9mmf3omc/1/
html
<li role="presentation">Home </li>
<li role="presentation">About Us</li>
<li role="presentation">Contact Us</li>
<li role="presentation">Gallery</li>
css
li {
display: inline-block; # necessary to format links/buttons correctly
margin: 10px 0;
}
li a {
border: 1px solid blue; # adds blue border around link/button
padding: 10px; # gives some room between text and border
text-decoration: none; # removes underlined link if you prefer
}
As for border colors, check out one of many color-picker tools like THIS and make the border any shade of blue you want. Just change:
border: 1px solid blue;
to say,
border: 1px solid #88EBFB;
You can do it by a few ways.
1st does the ul or ol the li belong too have a class name like
<ul class = "name">
<li role="presentation">Home </li>
<li role="presentation">About Us</li>
<li role="presentation">Contact Us</li>
<li role="presentation">Gallery</li>
</ul>
I'm trying to style my WordPress Menu. I want each menu item to have a different color and the background color of all the children on pages and posts must have the background color the same as the parent text color.
What I want is the following:
- <ul id="main-menu" class="menu">
<li id="1">This is Red
<ul>
<li id="4">Background Red</li>
</ul>
</li>
<li id="2">This is Blue
<ul>
<li id="5">Background Blue</li>
</ul>
</li>
<li id="3">This is Green
<ul>
<li id="6">Background Green</li>
</ul>
</li>
- </ul>
I managed to get this right on the home page only, thinking that it would be the same for each page. But on other pages it's not reflecting as it's intended to reflect.
CSS styling for lists that has the '>' in it I am still battling to understand - I just find it confusing.
If someone could point me to a good tuturial or show me how it's done, I'd be most greatful.
An ID's can't start with a number, change it if you're currently using it. If there's no way to change it you can use [id='1'] {/* some css */}
The HTML
<ul class="menu">
<li id="first">This is Red
<ul>
<li>Background Red</li>
</ul>
</li>
<li id="second">This is Blue
<ul>
<li>Background Blue</li>
</ul>
</li>
<li id="third">This is Green
<ul>
<li>Background Green</li>
</ul>
</li>
</ul>
The CSS
#first {
color: red;
}
#first ul > * {
background-color: red;
color: white;
}
#second {
color: blue;
}
#second ul > * {
background-color: blue;
color: white;
}
#third {
color: green;
}
#third ul > * {
background-color: green;
color: white;
}
Here it is at work http://jsfiddle.net/9mD8z/
Hope it solves your problem.
just Now i found the answer for this question:)
# Appearance > Menus look top and click: Screen Options!
Then check (CSS Classes) under: Show advanced menu properties
So will display new field called CSS Classes. with each item!
Now you can target the classes you have assigned from within your stylesheet.
Regards:)
Guest!
I've managed to work this out for my self the styling I need to apply actually goes like this:
.jqueryslidemenu #menu-item-12 a{color: #6cd7fb !important;}
.jqueryslidemenu #menu-item-12 > ul.sub-menu {border: 1px solid #6cd7fb; border-radius: 10px; background: none repeat scroll 0 0 #6cd7fb !important;-moz-box-shadow: 8px 8px 9px #888888; -webkit-box-shadow: 8px 8px 9px #888888; box-shadow: 8px 8px 9px #888888; }
.jqueryslidemenu #menu-item-12 > ul.sub-menu li a{color:#fff!important; background-color:#6cd7fb !important;}
.jqueryslidemenu #menu-item-12 ul.sub-menu > li a:hover{
background-color:#6cd7fb !important;
border-color: #56c8f5 #65E1F7 #AEEEF9; border-image: none;
border-style: solid;
border-width: 1px;
border-radius: 15px;
box-shadow: 0 -5px 9px #AEEEF9 inset;}
This is working for me - I know I have to work on the styling the color a bit more. If anyone has a better solution, I'm all ears :)
Obviously this is just for one of the menu items - the id of the other menu items change
I'm attempting to get a CSS style to apply to the top list item but can't get the rules to apply in the desired fashion. In the example below I'm trying to remove the top border for the very first li item. It works if I put style="border-top: none;" inline on the locationMenuTopItem element but I need to do it with a style block.
Why is the #locationMenu li block overruling the #locationMenuTopItem block?
<html>
<head>
<style>
#locationMenu li {
border-top: 1px solid #e1e1e1;
}
#locationMenuTopItem {
border-top: none;
}
</style>
</head>
<body>
<ul id="locationMenu">
<li id="locationMenuTopItem">Top Menu
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Top Menu 2</li>
<li>Top Menu 3</li>
</ul>
</body>
Why is the "#locationMenu li" block overruling the #locationMenuTopItem block?
It is more specific
#locationMenu > li:first-child
should do the job without having to add additional ids. (Although not in IE6)
This could be a possible answer:
#locationMenu li,
#locationMenu li:first-child ul li
{
border-top: 1px solid #e1e1e1;
}
#locationMenu li:first-child
{
border-top:none;
}
It is overrulie, because the #locationMenu li is deeper than #locationMenuTopItem alone. The more statements in a row, the deeper it is.
Because of CSS specificity - the selector #locationMenu li is more specific than #locationMenuTopItem. Using #locationMenu #locationMenuTopItem will work here.
Here's a graphical guide from Andy Clarke that will help: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
I want to create a CSS/JS accordion menu, with HTML like so:
<ul>
<li>First Link
<ul>
<li>Child One</li>
<li>Child Two</li>
</ul>
</li>
<li>Second Link</li>
<li>Third Link</li>
</ul>
The nav structure can get N levels deep, and each child menu will be indented from its parent. I want there to be a border that spans 100% of the width between all nav elements including the n-th level child elements. Like this:
alt text http://files.getdropbox.com/u/64548/nested-nav.png
I cannot for the life of me figure out an easy way to do this without using JavaScript, but it feels like something that should be possible. (I will be using JS to expand/collapse the nav tree).
You need to have the border and padding on the <a> which also must be set to display:block. This gives an added bonus as it makes the whole <li> region clickable.
There is no extra markup needed in the ul. Just define the max number of sublists in your css.
Example here
a {text-decoration:none;}
ul {width:240px;padding:0;list-style:none;border-top:1px solid #000;}
ul ul, ul ul ul {border-top:0;}
li a {border-bottom:1px solid #000;display:block;padding-left:0px;}
li li a {padding-left:40px;}
li li li a {padding-left:80px;}
<ul>
<li>First Link
<ul>
<li>Child One</li>
<li>Child Two
<ul>
<li>Child Two One</li>
<li>Child Two Two</li>
</ul>
</li>
</ul>
</li>
<li>Second Link</li>
<li>Third Link</li>
</ul>
The tiling background image for the divider rows does not contradict resizing (at least should not, with sane CSS renderers).
This is pretty sloppy for my tastes, but basically it requires text-indent instead of padding or margin to achieve the nesting. But then to use a sprite image as the bullet for the <a>, you have to end up taking the current text-indent for the level and bump the sprite image over that many px, minus the sprite image width.
I've changed it to use padding-left on the anchor instead, but then this requires overflow: hidden on the parent div to hide the extra border that gets pushed to the right with each nesting.
And of course, visualize any of the stuff like .two_deep, .expanded, etc. as being done with jQuery, and NOT hardcoded into the CSS. It should be fairly simple to get a ul's depth in the menu.
<html>
<head>
<style>
body {font: normal 11px Arial;}
a:link, a:visited {color: #888; text-decoration: none;}
a:hover, a:active {color: #000; text-decoration: none;}
div {width: 250px; border-top: 1px solid #888; overflow: hidden;}
ul {
width: 100%;
margin: 0; padding: 0;
list-style-type: none;
}
li {
padding: 5px 0;
border-bottom: 1px solid #888;
}
li a {
display: block;
}
.two_deep li a {
padding-left: 25px;
}
.three_deep li a {
padding-left: 50px;
}
.four_deep li a {
padding-left: 75px;
}
.expanded {
display: block;
width: 100%;
border-bottom: 1px solid #888;
margin: -5px 0 5px;
padding: 5px 0;
}
li > ul {margin: -5px 0 -6px;}
</style>
</head>
<body>
<div>
<ul>
<li><a class="expanded" href="#">First Link</a>
<ul class="two_deep">
<li>Child One</li>
<li>
<a class="expanded" href="#">Child Two</a>
<ul class="three_deep">
<li>
<a class="expanded" href="#">Child One of Child Two</a>
<ul class="four_deep">
<li>Child One of . . .</li>
<li>Child Two of . . .</li>
</ul>
</li>
<li>Child Two of Child Two</li>
</ul>
</li>
</ul>
</li>
<li>Second Link</li>
<li>Third Link</li>
</ul>
</div>
</body>
</html>
But honestly, maybe you would rather just use a background image, and have it look ugly/broken when text is resized. The css is a bit 'hack-y' for my tastes, especially all the padding compensation needed due to the anchor and li having to be siblings.
I've tested this in Firefox 3.5, Safari 4, and Opera 9.6. I don't have access to anything else at the moment, so it's probably not even very pretty.
Needless to say it's probably a complete wreck in all IE versions. Sorry… It was just my own little test to see if I was up to the task!
Edit: It DOES work with page zoom and text resize, but again, IE support (?)…