I'm having trouble with the ':not' selector in CSS, I want to select everything under head except for the title (h1) I tried using '#head:not(h1)' but it still selects everything under #head. What is the proper way to select all but h1? Thankyou.
<html>
<head>
<style>
/*I want to select all the elements under head id except for h1 title*/
#head:not(h1){
background: red;
}
</style>
</head>
<body>
<div id = "subpage">
<div id = "head">
<hgroup>
<h1>My Webpage</h1>
<h3>Subheading</h3>
</hgroup>
<div class = "posts">
<ul id = "post1">
<li>entered by: John</li>
<li>hearts: 2000</li>
</ul>
</div>
<div class = "posts">
<ul id = "post2">
<li>entered by: Chris</li>
<li>hearts: 100</li>
</ul>
</div>
</div>
<div id = "whats new">
<h1>Title</h1>
<p>a bunch of text</p>
</div>
</div>
</body>
</html>
You can do it like this.
#head *:not(h1) {
background: red;
}
OR
#head :not(h1) {
background: red;
}
However, meaning that it selects everything except 'h1' under '#head' means that it contains 'hgroup', which is the parent element of 'h1'.
In this case, the background color of 'h1' is 'transparent' by default, so the background color is red due to 'hgroup'.
#head *:not(h1) {
background: red;
}
<div id="subpage">
<div id="head">
<hgroup>
<h1>My Webpage</h1>
<h3>Subheading</h3>
</hgroup>
<div class="posts">
<ul id="post1">
<li>entered by: John</li>
<li>hearts: 2000</li>
</ul>
</div>
<div class="posts">
<ul id="post2">
<li>entered by: Chris</li>
<li>hearts: 100</li>
</ul>
</div>
</div>
<div id="whats new">
<h1>Title</h1>
<p>a bunch of text</p>
</div>
</div>
You could separately specify the h1 elements to have the base color.
#head h1 {
background: white;
}
#head * { /* depending on the look you want, you may not need the * */
background: red;
}
<div id = "subpage">
<div id = "head">
<hgroup>
<h1>My Webpage</h1>
<h3>Subheading</h3>
</hgroup>
<div class = "posts">
<ul id = "post1">
<li>entered by: John</li>
<li>hearts: 2000</li>
</ul>
</div>
<div class = "posts">
<ul id = "post2">
<li>entered by: Chris</li>
<li>hearts: 100</li>
</ul>
</div>
</div>
<div id = "whats new">
<h1>Title</h1>
<p>a bunch of text</p>
</div>
</div>
#subpage div.head *:not(h1) {
background: red;
}
use styles like this.
go to this link & you can get idea
https://stackoverflow.com/a/16769552/8928037
First you want to add a background color for <h1>. Try this.
#head h1{
background: white;
}
#head :not(h1) {
background: red ;
}
<div id = "subpage">
<div id = "head">
<hgroup>
<h1>My Webpage</h1>
<h3>Subheading</h3>
</hgroup>
<div class = "posts">
<ul id = "post1">
<li>entered by: John</li>
<li>hearts: 2000</li>
</ul>
</div>
<div class = "posts">
<ul id = "post2">
<li>entered by: Chris</li>
<li>hearts: 100</li>
</ul>
</div>
</div>
<div id = "whats new">
<h1>Title</h1>
<p>a bunch of text</p>
</div>
</div>
Related
I cannot get a div within a list to display inline. It seems to create a line break.
I have tried using a clear div, setting the body font-size to 0, rearranging the html and all sorts of other things to no avail.
jsfiddle: https://jsfiddle.net/Loy4a2st/1/
.guiding_more_info_button{
cursor:pointer;
display:inline;
}
.guiding_more_info{
margin-left:3rem;
display:none;
}
<h2>Itinerary</h2>
<li><p>Day 01 </p></li>
<li><p>Day 02</p></li>
<li>
<p>Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li><p>Day 04</p></li>
<li><p>Day 05.</p></li>
P tag block element, apply p tag to inline
.guiding_more_info_button{
font-family:maratExtraLightItalic;
cursor:pointer;
display:inline;
}
.guiding_more_info{
margin-left:3rem;
font-family:maratExtraLight;
display:none;
}
.inline{
display:inline;}
<h2>Itinerary</h2>
<ul>
<li><p>Day 01 </p></li>
<li><p>Day 02</p></li>
<li>
<p class="inline">Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li><p>Day 04</p></li>
<li><p>Day 05.</p></li>
</ul>
I have used your code and made some adjustments.
.guiding_more_info_button {
font-family: maratExtraLightItalic;
cursor: pointer;
display: inline-block;
}
.guiding_more_info {
margin-left: 3rem;
font-family: maratExtraLight;
display: none;
}
#day3 {
display: inline-block;
}
<h2>Itinerary</h2>
<li>
<p>Day 01 </p>
</li>
<li>
<p>Day 02</p>
</li>
<li>
<p id="day3">Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li>
<p>Day 04</p>
</li>
<li>
<p>Day 05.</p>
</li>
You can view the fiddle here:
https://jsfiddle.net/fo6ryj29/
You need to make both elements you want to show next to each other display:inline-block.
In your case the div and the p tag.
Your html isn't written correctly. You need to wrap your <li>'s in the <ul> element for it work properly.
.guiding_more_info_button{
font-family:maratExtraLightItalic;
cursor:pointer;
display:inline;
}
.guiding_more_info{
margin-left:3rem;
font-family:maratExtraLight;
display:none;
}
<h2>Itinerary</h2>
<ul>
<li><p>Day 01 </p></li>
<li><p>Day 02</p></li>
<li>
<p>Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li><p>Day 04</p></li>
<li><p>Day 05.</p></li>
</ul>
I have an HTML page and I am trying to fix the print layout issues on all of the browsers. Here is the code
<style type="text/css">
#media print {
* {
overflow: visible !important;
}
body {
height: auto;
color: #000;
background: #fff!important;
}
nav, aside {
display: none;
}
a-page {
float: left;
margin: 0;
box-shadow: 0;
page-break-inside: avoid;
widows: 3;
orphans: 3;
}
#header, #menu, #sidebar{ height:1px; display:none;}
#page {
size: A4 portrait;
}
ul.grid-container {
margin: 0;
padding: 0;
}
}
body {
background: rgb(204,204,204);
}
a-page {
width: 21cm;
height: 29.7cm;
background: white;
display: block;
margin: 1cm auto;
}
ul.grid-container {
border:0px dashed black;
width:100%;
vertical-align: middle;
text-align: center;
table-layout: fixed;
list-style-type: none;
padding-left: 0;
margin-top: 0
}
ul.grid-container .container {
border: 1px dashed black;
width: 49.7%;
height: 100%;
float: left;
position: relative
}
p.fcards {
padding-left:10px;
padding-right:10px;
text-align:center;
}
p.fc_sm {
padding-left:10px;
padding-right:10px;
text-align:center;
font-size: 1em;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
p.fc_md {
padding-left:10px;
padding-right:10px;
text-align:center;
font-size: 1.5em;
}
p.fc_lg {
padding-left:10px;
padding-right:10px;
text-align:center;
font-size: 2em;
}
.size_4x2 .grid-container li{
height:7.4cm;
}
</style>
<body class="size_4x2">
<a-page>
<ul class="grid-container">
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
</ul>
</a-page>
<a-page>
<ul class="grid-container">
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
</ul>
</a-page>
<a-page>
<ul class="grid-container">
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
</ul>
</a-page>
</body>
https://jsfiddle.net/lajin/myf8nfpk/
When I see print layout
On Chrome it add an extra page before each page
On FF the page loads fine but margins on top is different on first pages
IE there is Huge bottom margin as it shrinks to fit the screen
Any suggestions on how to fix the print page issues?
Thank you for you help in advance.
Most of your problems have been caused by inefficient usage of margins, padding and borders. I solved this problem by first stripping away the irrelevant code by removing class definitions that were never called upon and removing lines that I knew or suspected were not influential, test running the new code after each removal to ensure no difference was made to the performance of the page.
My next step was to add the following CSS code to the beginning of the CSS component...
*
{
box-sizing : border-box;
margin : 0;
padding : 0;
}
By default borders are not included in the defined dimensions of an area and are instead added to the outside of the area. By using box-sizing : border-box; at the highest level you force each area's borders to be included within it's area.
The default behaviour of margins and padding can also be a cause of much hidden grief. By setting them to 0 at the highest level you can then afford to ignore them until such time as you know they are going to be needed for a specific class or id definition, at which point you would define them as per normal.
Next, I changed the line -
margin: 1cm auto;
to -
margin : auto;
As your file is currently coded this has the effect of making it appear as if large amounts of padding surround the A4 sheet which can look fine on-screen, but it is still included in the printed area which can cause poor layout when printing. There are a few ways of getting around this problem. I would suggest regarding a-page as the A4 area and adding within that div a second div such as a-page-text-area wherein would be placed the actual text. For now I am using margin : auto; to keep the page centred horizontally and using buffer regions to separate the pages vertically.
Finally, with the class definitions ul.grid-container .container and ul.grid-container you are relying on one definition to overwrite the properties of another. In more complex programs this can lead to errors occuring in some circumstances. As a matter of good practice I recommend placing all shared property definitions within a common class or classes and all peculiar property definitions in an id. Please note that when opening a div code such as class = "container-grid container-all" can be used to apply the attributes of more than one class to that div.
The complete code that I used to fix your problem follows...
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport"
content = "width=device-width, initial-scale=1.0"
>
<style type = "text/css">
*
{
box-sizing : border-box;
margin : 0;
padding : 0;
}
#media print
{
#page
{
size : A4 portrait;
}
.a-page
{
float : left;
page-break-inside : avoid;
}
body
{
background : #fff!important;
}
}
body
{
background : rgb( 204, 204, 204 );
}
.a-page
{
background : white;
display : block;
height : 29.7cm;
margin : auto;
width : 21cm;
}
.buffer-region
{
min-height : 20px;
}
.container
{
border : 1px dashed black;
width : 50%;
}
.fc_sm
{
font-size : 1em;
left : 50%;
margin : 0;
position : absolute;
top : 50%;
transform : translate(-50%, -50%);
}
.grid-container
{
list-style-type : none;
width : 100%;
}
.grid-container .container
{
float : left;
height : 100%;
position : relative;
}
.size_4x2 li
{
height : 7.4cm;
}
</style>
</head>
<body class = "size_4x2">
<div class = "a-page">
<ul class = "grid-container">
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
</ul>
</div>
<div class = "buffer-region">
</div>
<div class = "a-page">
<ul class = "grid-container">
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
</ul>
</div>
<div class = "buffer-region">
</div>
<div class = "a-page">
<ul class = "grid-container">
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
</ul>
</div>
</body>
</html>
If you have any questions or comments, then please feel free to ask / make them.
I seem to have come across an error within my navigation bar. When I navigate from my "Technologies" page to Home page it works. However when I navigate from the Home Page to the Technologies page nothing happens. Can you explain this error because it honestly doesn't make any sense.
HTML: Home page
<body>
<h1 class = "name"><font color = "#3399FF"> Prog-Assist | </font><font size = "12"> Where Collaboration is Welcomed</font></h1>
<div id = "header">
<div id = "gradient">
<div class = "nav">
<!-- container-fluid gives full width container of whole viewport -->
<div class = "container-fluid">
<ul id = "nav" class= "text-left">
<li>Home</li>
<li>Technologies</li>
<li>Programs</li>
<li>Blog</li>
</ul>
<ul id = "nav" class = "text-right">
<li><strong>Sign Up</li>
<li>Sign In</li>
<li>Contact</strong></li>
</ul>
</div><!-- end container-fluid-->
</div><!--end nav-->
</div>
</div> <!-- end header -->
Tech Page:
<body>
<h1 class = "name" ><font color = "#3399FF"> Prog-Assist | </font><font size = "12"> Where Collaboration is Welcomed</font></h1>
<div id = "header">
<div id = "gradient">
<div class = "nav">
<!-- container-fluid gives full width container of whole viewport -->
<div class = "container-fluid">
<ul id = "nav" class= "text-left">
<li>Home</li>
<li>Technologies</li>
<li>Programs</li>
<li>Blog</li>
</ul>
<ul id = "nav" class = "text-right">
<li><strong>Sign Up</li>
<li>Sign In</li>
<li>Contact</strong></li>
</ul>
</div><!-- end container-fluid-->
</div><!--end nav-->
</div>
</div> <!-- end header -->
CSS for links:
#nav {
list-style: none;
}
.nav a {
text-decoration: none; /*remove underline*/
text-transform: uppercase;
color: #00002E;
}
.nav li {
display: inline;
float: left;
padding: 10px;
}
.text-left {
float: left;
padding-left: 30px;
}
My folder with files:
When I try to inspect element
Some steps to solve this issue:
lowercase your filenames. Main.html becomes main.html, same for all other html files.
use proper <html> open and closing tags. this is important!
you might use a <link> tag to include your style (stylesheet.css)
i've add "I'm the Main Page" and a title to show that navigation works
you might apply the same stuff to your tech.html
navigation works and css style, too.
File: main.html
<html>
<head>
<title>Main Page</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
I'm the Main Page.
<h1 class = "name">
<font color = "#3399FF"> Prog-Assist | </font><font size = "12"> Where Collaboration is Welcomed</font>
</h1>
<div id = "header">
<div id = "gradient">
<div class = "nav">
<!-- container-fluid gives full width container of whole viewport -->
<div class = "container-fluid">
<ul id = "nav" class= "text-left">
<li>Home</li>
<li>Technologies</li>
<li>Programs</li>
<li>Blog</li>
</ul>
<ul id = "nav" class = "text-right">
<li><strong>Sign Up</li>
<li>Sign In</li>
<li>Contact</strong></li>
</ul>
</div><!-- end container-fluid-->
</div><!--end nav-->
</div>
</div> <!-- end header -->
</body>
</html>
I'm new here, but I alreadyy searched a while for a solution not only on this site.
Ok, here's the problem:
I built a static page, with multiple sections. Each section can be shown up through an anchorlink in the navbar, which is static on the left side of the page. How can I achieve, that the link to the section, which is just shown on the screen, is active?
It should be pretty easy, if the sections would be in external html-files. But I can't find a way to make this happen in my case...
<div id="navbar">
<ul>
<li><h5>SERVICE </br> </br></h5></li>
<li><h5>LEISTUNGEN </br> </br></h5></li>
<li><h5>ÜBER UNS </br> </br></h5></li>
<li><h5>PARTNER </br> </br></h5></li>
<li><h5>KONTAKT </br></h5></li>
</ul>
I think of a JavaScript that changes the classes of the links onclick, but I can't get this to work...
Please help me, tell me what I should do!
Last but not least, please excuse my poor english and coding knowledge ;)
For further explanation of the page I want to create!
This is my Navigation Menu, which has the fixed position on the left!
<div id="navbar">
<ul>
<li><h5>SERVICE </br> </br></h5></li>
<li><h5>LEISTUNGEN </br> </br></h5></li>
<li><h5>ÜBER UNS </br> </br></h5></li>
<li><h5>PARTNER </br> </br></h5></li>
<li><h5>KONTAKT </br></h5></li>
</ul>
</div>
It continues with one big section, which's contents are 4 small sections. These sections look like this:
<div id="weiss">
<div id="1" class="content section" data-id="1">
<div class="page page-1">
<div class="topic">
<img class="mwlogo" src="media/logo.png"/>
</div>
<div class="text">
<h2>...</h2>
</div>
<div class="vorteile">
<div class="first">
<ol>
<li><p>...</li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
</ol>
</div>
<div class="last">
<ol>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
</ol>
</div>
</div>
</div>
</div>
<div>
I linked to the activemenuitem in the index.html:
<script type="text/javascript" src="functions/js/activemenuitem.js"></script>
It looks like this:
function checkActiveSection ()
{
var fromTop = jQuery(window).scrollTop() ;
jquery('#weiss .section'.each(function() {
var sectionOffset = jQuery(this).offset() ;
if ( sectionOffset.top <= fromTop )
{
jQuery('#navbar li').removeClass('active') ;
jQuery('#navbar li[data-id="'+jQuery(this).data('id')+'"]').addClass('active') ;
}
}) ;
}
jQuery(window).scroll(checkActiveSection) ;
jQuery(document).ready(checkActiveSection) ;
jQuery('#navbar li a').click(function(e){
var idSectionGoto = jQuery(this).closest('li').data('id') ;
$('html, body').stop().animate({
scrollTop: jQuery('#weiss .section[data-id="'+idSectionGoto+'"]').offset().top
}, 300,function(){
checkActiveSection() ;
});
e.preventDefault() ;
}) ;
But the problem is still, that there seems to be no way for me, to get this to work! The script loads when loading the site, but no class is being added or removed from the menu classes. What do I have to do?!
Please help me!
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(e){
var topMargin = jQuery(window).scrollTop() ;
if(topMargin < 100)
{
$("#navbar li a").removeClass('active');
$("#navbar li a.chap1").addClass('active');
}
else if(topMargin > 100 && topMargin <200)
{
$("#navbar li a").removeClass('active');
$("#navbar li a.chap2").addClass('active');
} else
{
$("#navbar li a").removeClass('active');
$("#navbar li a.chap3").addClass('active');
}
});
});
</script>
<div id="navbar">
<ul>
<li><h5>SERVICE </br> </br></h5></li>
<li><h5>LEISTUNGEN </br> </br></h5></li>
<li><h5>ÜBER UNS </br> </br></h5></li>
</ul>
</div>
Here is a solution adapted from Change Active Menu Item on Page Scroll? to your case :
http://jsfiddle.net/sX5Kq/1/
It's much more simple even if it's not completly optimised.
<div id="navbar">
<ul>
<li><h5>SERVICE</h5></li>
<li><h5>LEISTUNGEN</h5></li>
<li><h5>ÜBER UNS</h5></li>
<li><h5>PARTNER</h5></li>
<li><h5>KONTAKT</h5></li>
</ul>
</div>
<div id="sections">
<div class="section" data-id="1">
<h2>Services</h2>
<p></p>
</div>
<div class="section" data-id="2">
<h2>LEISTUNGEN</h2>
<p></p>
</div>
<div class="section" data-id="3">
<h2>Section 3</h2>
<p></p>
</div>
<div class="section" data-id="4">
<h2>Section 4</h2>
<p></p>
</div>
<div class="section" data-id="5">
<h2>Section 5</h2>
<p></p>
</div>
</div>
CSS
body {
font-family: Helvetica, Arial;
}
#navbar {
position: fixed;
z-index: 1;
left: 0;
right: 0;
top: 0;
width:100px ;
}
#navbar li.active a {
color:red ;
font-weight:bold ;
}
#sections {
margin-left:110px ;
}
JS
function checkActiveSection()
{
var fromTop = jQuery(window).scrollTop() ;
jQuery('#sections .section').each(function(){
var sectionOffset = jQuery(this).offset() ;
if ( sectionOffset.top <= fromTop )
{
jQuery('#navbar li').removeClass('active') ;
jQuery('#navbar li[data-id="'+jQuery(this).data('id')+'"]').addClass('active') ;
}
}) ;
}
jQuery(window).scroll(checkActiveSection) ;
jQuery(document).ready(checkActiveSection) ;
jQuery('#navbar li a').click(function(e){
var idSectionGoto = jQuery(this).closest('li').data('id') ;
$('html, body').stop().animate({
scrollTop: jQuery('#sections .section[data-id="'+idSectionGoto+'"]').offset().top
}, 300,function(){
checkActiveSection() ;
});
e.preventDefault() ;
}) ;
head no background and color black ,on mouseover its color will be white and background black ,its working fine but
onmouse over on content i want to change the color of head?
how?
Is it possible only using css?
<ul id="meg">
<li>head
<div>
<h2>su head</h2>
<p>content</p>
<p>content</p>
</div>
</li>
<li>head
<div>
<h2>su head</h2>
<p>content</p>
<p>content</p>
</div>
</li>
</ul>
You can do it with JavaScript. Though I'm not entirely clear on what you wanted, I gave it a shot:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function stuff(){
var k = document.getElementsByTagName('li');
for (var i = 0; i < k.length; i++) {
var s = k[i];
s.firstChild.style.color = 'white';
s.firstChild.style.backgroundColor= 'black';
}
}
</script>
</head>
<body>
<ul id="meg">
<li>
head
<div>
<h2>su head</h2>
<p>content</p>
</div>
</li>
</ul>
</body>
</html>
this might work. i've knows css to be able to affect elemnts after the closing tag not before,so this is areverse of the "+" used to do that.
<style type="text/css">
#content:hover - #head { background-color: black; color: white; }
</style>
<ul id="meg">
<div id="head">
<li>head
</div>
<div id="content">
<h2>su head</h2>
<p>content</p>
<p>content</p>
</div>
</li>
</ul>
Have you tried #meg li a:hover { background-color:#000;color:#FFF; }