CSS - Any Alternative To Sibling Selector?
using the sibling selector like this
Code: p, h3 { margin-bottom: 1em; } p + h3 { margin-top: 2em; } should produce output like this (taking mrgin collapsing into consideration) Code: first h3 at top of page paragraph h3 with 2em gap to preceding paragraph paragraph secondary paragraph with 1em gap to preceding paragraph h3 etc but alas, the sibling selector does not work in IE6! so how do i do it otherwise, whilst retaining simple markup? Similar TutorialsHi, So, there's the adjacent child selector element + element, but I was wondering if there was something that did the reverse of that selector. For example, let's say I have this: Code: <div id="menu"> <div class="option">1</div <div class="option">2</div> <div class="option">3</div> <div class="option">4</div> </div> I know I can use the element + element selector to quickly style every option div but the first, but is there some selector to quickly style every option element but the last. Thanks. --Surgery Hi everyone, Been racking my brains trying to figure out why a class is not being applied to a div, then i narrowed it down and realised that the ID selector is always taking precedence to the class attribute. Consdier this html page: Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <style type="text/css"> #container { background-color: red; width: 100px; height: 50px; } .change_bg { background-color: green; } </style> </head> <body> <div id="container" class="change_bg" ></div> </body> </html> The div's background color comes out red and not green, as one would expect. Why is this happening? aren't styles supposed to be cascading? isn't that what CSS is all about? I can use !important but i want to know why it's not doing what is expected. Many thanks Hi everyone. I have a div with text and directly after that I have an image. Since a DIV is a block level element, it causes the image to wrap to the next line. Is there some way I can prevent it from doing so? Thanks for any help or suggestions. I am trying to create something similar to tooltips and having a problem. I know that the browsers support tooltips with the title attribute but I'm looking to do something different. Also, I know that IE has bugs with hovering on non-anchor tags but I'm trying to make this work in a standards-compliant browser (I'm not using IE). I've tried the code given by SantaKlauss and it worked fine. But why doesn't this work (a simple example to illustrate the problem)? Code: <style type="text/css"> .test:hover + div { background-color: red; } </style> <img class='test' src='test.gif' /> <div>here is some text</div> If I remove the :hover pseudo-class declaration like this: Code: .test + div { background-color: red; } It correctly sets the background color on the div following the image. So why doesn't the first example work with the hover pseudo-class?? Thanks in advance, Jeremiah I've been getting quite confused as to why some CSS wasn't doing what I'd expected it to do. I have code like this: Code: .tBox { width: 50px; height: 50px; } .tHeader { opacity: 1 } .tBox:hover .tHeader { opacity: 0.5 } I then have my DIVs like this (simplified) Code: <div class="holder"> <div class="section1"> <div class="tBox"> </div> </div> <div class="section2"> <div class="tHeader"></div> </div> </div> So what I was expecting to happen is that when someone hovered over "tBox" then "tHeader" would switch opacity. But it wasn't. And I believe this is because tBox and tHeader aren't in the same parent. I read somewhere something about using a "+" to do some special selector stuff in the CSS but didn't really understand. Can someone please help me with how I can get this to work outside of them sharing their parent. Thanks. Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so: Code: .statusDiv { clear: both background-image: url(../png/disclosure_triangles/blue_block.png); height: 20px; margin-bottom: 1px; } This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel. Does anyone know of a way to control the inter-div spacing when "clear" is defined? Thanks Ken --------------------------------------------------------------- Original post --------------------------------------------------------------- I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems. The first row renders perfectly but the text of subsequent rows overlaps the text of first row. Here's the html: Code: <div id="contentBlock" class="bodyText"> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">New</div> </div> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">Open</div> </div> </div> And here's the CSS: Code: #contentBlock { position: absolute; top: 130px; left: 200px; height: 101%; /* Hack to force vertical scroll bars */ right: 280px; min-width: 400px; visibility: visible; display: block; } .statusDiv { clear: both background-image: url(../png/disclosure_triangles/blue_block.png); height: 20px; margin-bottom: 1px; } .disclosureCollapsed { background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png); display: block; text-align: right; /*position: absolute;*/ float: left; top: 0px; left: 0px; width: 18px; height: 20px; } .disclosureCollapsed:hover { cursor: pointer; } How would I make the text in each subsequent row (statusDiv) line up? Thanks for any help Ken Is there a CSS selector that only IE5 will detect? I have my site working fine in IE6 and Firefox now and it displays legibly in IE5 but the padding is a bit off. Is there a selector I can use (such as * for IE in general) to make a change to the padding on IE5. Or should I be looking into loading separate CSS files dependent on the users browser? Can CSS select the first word in a Div? If so how? Example: first word in a pharagraph. I'm new to CSS but have read more in the past two days than I care to tell you about. I'm stuck on how to reference a deeply nested element that is automatically generated by a drupal view. The problem lies with the fact that I can select it directly and style it but other views (pages) are rendered with the exact same attributes (Name, Class, and ID). The Class of the page or view is different but is nested about seven tags back. My question is: How can I select the Element to be styled when the only differentiator is so far back in the hierarchy of the page without using a local or inline CSS? The following are snippets of the two pages that share the same Element attributes (<select name="filter0" class="form-select" id="edit-filter0" >) Thanks for any suggestions you might have. Mike ********* First page ******************* Code: <div class='view view-firstview'> <form action="URL" method="get" id="views-filters"> <div> <table> <thead> </thead> <tbody> <tr class="odd"> <td> <div class="form-item"> <select name="filter0" class="form-select" id="edit-filter0" > <option value="**ALL**"><All></option> </select> </div> </td> <td> <div class="form-item"> <select name="filter1" class="form-select" id="edit-filter1" > <option value="**ALL**"><All></option> </select> </div> </td> <td> <input type="submit" id="edit-submit" value="Submit" class="form-submit" /> </td> </tr> </tbody> </table> </div> </form> </div> ******** Second Page ******************** Code: <div class='view view-secondview'> <form action="URL" method="get" id="views-filters"> <div> <table> <thead> </thead> <tbody> <tr class="odd"> <td> <div class="form-item"> <select name="filter0" class="form-select" id="edit-filter0" > <option value="**ALL**"><All></option> </select> </div> </td> <td> <div class="form-item"> <select name="filter1" class="form-select" id="edit-filter1" > <option value="**ALL**"><All></option> </select> </div> </td> <td> <input type="submit" id="edit-submit" value="Submit" class="form-submit" /> </td> </tr> </tbody> </table> </div> </form> </div> I have a large data sheet with individual td IDs, numbered 1 to 49 (first 3 shown for reference). <td id="data_cell_1"> <td id="data_cell_2"> <td id="data_cell_3"> I have been trying to apply a style to all of them (No I don't want to use a class, because they override the id's don't they? Or could I apply both a class and id to an element?) td[rel~="data_cell_"]:hover{background: #87F0FF;} td#[rel~="data_cell_"]:hover{background: #87F0FF;} td[id~="data_cell_"]:hover{background: #87F0FF;} td#[id~="data_cell_"]:hover{background: #87F0FF;} None of those worked. Isn't there a way to select all ID's based on partial information? is there a specific order in which to put the css selectors in a style sheet, eg a:link a:hover a:active a:visited my problem is that the hover state isn't activated for links i have already visited. thank you I have three INPUT elements in a row and I want to apply different formatting to the second two. I know I can use: input+input { } This affects all but the first of the INPUT elements, which is exactly what I want. However, this works only with NS/Mozilla, and not MSIE. There is a way to apply CSS based on words within the value of the element, but I'm not sure how it works. For instance in the code: <INPUT type="submit" name="Submit" value="Browse"> I think there's a way to say "apply this style if the word 'BROWSE' is present in the element", but I can't make it work. Also, I know I can apply a CLASS to the element, but I'd like to not touch the HTML and use strictly CSS if possible. Can anybody help with this? Thanks. Hi, I check my css file on 3wc. you will find the error messages/warnings and my css code in this link http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Falicelee.no-ip.com&usermedium=all I did some research on ID selector. I still don;t understand understand why 3wc css validator cannot recognize ID selector... how should i correct the errors and warning? i have already done the html validation... it is error-free and valid in html 4.0 thanks Can someone help me with this issue? I've looked through the selector section of the CSS2.1 spec, but I can't find anything about it. Consider the following CSS excerpt (real life example): Code: #attachments table td, #attachments table th { padding: 0 1em; } Lots of extraneous text in there, right? Isn't it possible to do something like this instead: Code: #attachments table (td, th) { padding: 0 1em; } Or at least something similar? Can anyone help poor little me with this? Hello friends How can i define a css rule with an ID selector for two or more different ID's for an <div> element thanks Hey everyone, I have a footer with two images that link to various associations for home building. In firefox when I over over the link which has a nested image. The next element is a paragraph which is hidden unless the link is hovered over. In IE the paragraphs don't show. I don't know why since I'm using a:hover, well actually it's #link-ID.hover. PHP Code: <div id="footer" style=""> <div id="foot-left" style=""> <div id="cedia"> <a id="cedia-link" href="http://www.cedia.net/"> <img src="images/cedia.png"> </a> <p id="cedia-info"> Custom<br> Electronic<br> Design &<br> Installation<br> Association </p> </div> <div id="ochba"> <a id="ochba-link" href="http://www.gohba.ca/"> <img src="images/ochba.png"> </a> <p id="ochba-info"> Ottowa-Carleton<br> Home<br> Builders<br> Association </p> </div> </div> <div id="foot-right" style=""> <p>To contact us:</p> <address> Phone: 613-838-4800<br> Fax: 613-838-3800<br> Email: info@moorhousecabling.ca<br> 9 Mary Hill Crescent, Richmond, Ontario, K0A 2Z0 </address> </div> </div> Code: css #footer{ float:left; clear:both; width:800px; overflow:hidden; height:140px; } #foot-left{ float:left; clear:none; width:216px; height:100%; } #cedia{ font-size:small; width:50%; float:left; clear:none; } #cedia-link:hover + #cedia-info{ display:block; } #cedia img{ margin-left:40px; float:left; clear:none; border:0; } #cedia-info{ margin:0 0 0 40px; padding:0; display:none; float:left; clear:both; } #ochba{ font-size:small; width:50%; float:left; clear:none; } #ochba-link:hover + #ochba-info{ display:block; } #ochba img{ margin-right:40px; float:right; clear:none; border:0; } #ochba-info{ margin:0; padding:0; display:none; float:left; clear:both; } #foot-right{ float:left; clear:none; background-color:#e6232b; font-size:x-small; padding:20px 0 0 20px; height:100%; width:563px; color:#ffffff; font-weight:bold; } Unfortunately no matter what I do to my routers firewall, including turning it off and also trying to add the webserver host to the DMZ. Either way all the port scanners I've used said that port 80 was not responding to SYN connection requests at all. Basically the port is in stealth mode. I cannot give you a live sample of the site. Any ideas or help would be greatly appreciated. I'm a bit confused about the class and id selector. It seems they both produce the same result. I've a book and it said that the id selector can be used once. Is that mean used once on the web page or on the css? <div class="content"></div> <div id="content"></div> Thanks. I'm a CSS newbie and have a basic question. It seems that the selectors class and id do ecaxtly the same thing. So this begs the question: Which one should I use and why is it better then the other selector? I see that both should not begin with a number (css1) and I am unclear about the requirement for the selector to be unique. Thanks Folks! I want to know if ID Selectior for a class is avaible in css. I got many textboxes cssclass'es applied to .TEXTBOX_BLACK but I wantto add extra attribute to only Textbox10 something like overflow :auto; thanks much before any answers. regards. my attempt is below but ofsure not working: .TEXTBOX_BLACK { border-style : solid; border-width: 1px; border-color:Black; font-family: Tahoma; height:14px; width:140px; background-color: #414141; } .TEXTBOX_BLACK #TextBox10 { overflow :auto; } Hello, This is my first post at devshed and I must say I am more than excited to have found this community... I am having a css problem and I was hoping that someone might be able to help me? I am trying to add "styles" to my wysiwyg text editor... My editor plugin points to a css file to define the different "styles" for text. Currently it is working fine with the following code... all of the styles listed below in the css display correctly: Code: /* Typography Styles */ ul.bullet-1, ul.bullet-2, ul.bullet-3, ul.bullet-4, ul.bullet-5, ul.bullet-6, ul.bullet-7, ul.bullet-8 { padding-left: 15px; overflow: hidden; margin-left: 5px; } ul.bullet-1 li, ul.bullet-2 li, ul.bullet-3 li, ul.bullet-4 li, ul.bullet-5 li { list-style: none; padding-bottom: 3px; margin-bottom: 5px; padding-left: 10px; } ul.bullet-6 li, ul.bullet-7 li, ul.bullet-8 li { list-style: none; padding-bottom: 3px; margin-bottom: 5px; padding-left: 22px; } ul.bullet-1 li {background: url(../images/typo/bullet-1.png) 0 5px no-repeat;} ul.bullet-2 li {background: url(../images/typo/bullet-2.png) 0 5px no-repeat;} ul.bullet-3 li {background: url(../images/typo/bullet-3.png) 0 5px no-repeat;} ul.bullet-4 li {background: url(../images/typo/bullet-4.png) 0 5px no-repeat;} ul.bullet-5 li {background: url(../images/typo/bullet-5.png) 0 5px no-repeat;} ul.bullet-6 li {background: url(../images/typo/bullet-6.png) 0 2px no-repeat;} ul.bullet-7 li {background: url(../images/typo/bullet-7.png) 0 2px no-repeat;} ul.bullet-8 li {background: url(../images/typo/bullet-8.png) 0 3px no-repeat;} pre { padding: 10px; background: #f6f6f6; border-top: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } blockquote { display: block; font-style: italic; font-size: 120%; line-height: 150%; width: auto; padding: 10px 20px 10px 20px; margin: 15px 0; background: #f6f6f6; border-top: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } blockquote.blue, blockquote.red, blockquote.green, blockquote.purple, blockquote.orange, blockquote.brown, blockquote.grey { display: block; font-style: italic; font-size: 120%; line-height: 150%; width: auto; padding: 0px 20px; margin: 15px 0; border: 0; background: 0; } blockquote.blue{color: #0D507A;} blockquote.red{color: #D12E2E;} blockquote.green{color: #74A824;} blockquote.purple{color: #9E0E87;} blockquote.orange{color: #CC8300;} blockquote.brown{color: #8B6846;} blockquote.grey {color: #666;} blockquote.quotes { display: block; background: url(../images/typo/quote-start.png) 0 5px no-repeat; padding: 0px 20px 0 38px; margin: 20px 0; font-size: 120%; line-height: 150%; width: auto; color: #666; border: 0; } blockquote.quotes p { padding: 0 38px 0 0; margin-top: 0; background: url(../images/typo/quote-end.png) 100% 100% no-repeat; } .important, .important-blue, .important-red, .important-green, .important-purple, .important-orange, .important-brown, .important-grey { padding: 15px; margin: 15px 0; } span.important-title, span.important-title-blue, span.important-title-red, span.important-title-green, span.important-title-purple, span.important-title-orange, span.important-title-brown, span.important-title-grey { position: absolute; display: block; margin-top: -24px; background: #fff; padding: 0 8px; font-weight: bold; font-size: 120%; } .important {border: 1px solid #333;} .important-blue {border: 1px solid #0D507A;} .important-red {border: 1px solid #D12E2E;} .important-green {border: 1px solid #74A824;} .important-purple {border: 1px solid #9E0E87;} .important-orange {border: 1px solid #CC8300;} .important-brown {border: 1px solid #8B6846;} .important-grey {border: 1px solid #666;} span.important-title {color: #333;} span.important-title-blue {color: #0D507A;} span.important-title-red {color: #D12E2E;} span.important-title-green {color: #74A824;} span.important-title-purple {color: #9E0E87;} span.important-title-orange {color: #CC8300;} span.important-title-brown {color: #8B6846;} span.important-title-grey {color: #666;} span.number, span.number-blue, span.number-red, span.number-green, span.number-purple, span.number-orange, span.number-brown, span.number-grey { display: block; font-size: 170%; float: left; margin: 2px 10px 0 15px; } span.general_heading{ background: url(http://mysite.com/components/com_magazine/layouts/images/bg/bg10.png) #3A3A3A repeat-x 0px 0px; display: block; height: 26px; line-height: 26px; text-indent: 8px; font-size: 12px; font-weight: bold; color: #cccccc; font-family: 'Arial Narrow', Arial, Helvetica, sans-serif; margin: 0px 3px 3px 3px; text-transform: uppercase; } span.number {color: #333;} span.number-blue {color: #0D507A;} span.number-red {color: #D12E2E;} span.number-green {color: #74A824;} span.number-purple {color: #9E0E87;} span.number-orange {color: #CC8300;} span.number-brown {color: #8B6846;} span.number-grey {color: #666;} span.highlight {background: #FFFBD5;padding: 1px 2px;} span.highlight-blue {color: #0D507A;} span.highlight-red {color: #D12E2E;} span.highlight-green {color: #74A824;} span.highlight-purple {color: #9E0E87;} span.highlight-orange {color: #CC8300;} span.highlight-brown {color: #8B6846;} span.highlight-grey {color: #666;} span.highlight-bold {font-weight: bold;font-size: 120%;} span.dropcap, span.dropcap-blue, span.dropcap-red, span.dropcap-green, span.dropcap-purple, span.dropcap-orange, span.dropcap-brown, span.dropcap-grey { display: block; font-size: 260%; float: left; margin: 0px 4px 0 0; line-height: 100%; } span.dropcap {color: #333;} span.dropcap-blue {color: #0D507A;} span.dropcap-red {color: #D12E2E;} span.dropcap-green {color: #74A824;} span.dropcap-purple {color: #9E0E87;} span.dropcap-orange {color: #CC8300;} span.dropcap-brown {color: #8B6846;} span.dropcap-grey {color: #666;} span.inset-left { display: block; color: #000; padding: 15px; float: left; width: 20%; font-size: 110%; font-weight: bold; font-style: italic; } span.inset-right { display: block; color: #000; padding: 15px; float: right; width: 20%; font-size: 110%; font-weight: bold; font-style: italic; } span.attention, span.notice, span.alert, span.download, span.approved, span.media, span.note, span.cart, span.camera, span.doc {display: block;padding: 8px 10px 8px 36px;margin: 15px 0;} span.attention {overflow: hidden;color: #B79000;border: 1px solid #E7BD72;background: #FFF3A3 url(../images/typo/attention.png) 10px 50% no-repeat;} span.notice {color: #648434;border: 1px solid #9BCC54;background: #CDEFA6 url(../images/typo/notice.png) 10px 50% no-repeat;} span.alert {color: #CF3738;border: 1px solid #FFACAD;background: #FFD5D5 url(../images/typo/alert.png) 10px 50% no-repeat;} span.download {color: #1C6B8B;border: 1px solid #6ABCE2;background: #A8CDE3 url(../images/typo/download.png) 10px 50% no-repeat;} span.approved {color: #666;border: 1px solid #a8a8a8;background: #ccc url(../images/typo/approved.png) 10px 50% no-repeat;} span.media {color: #C76E34;border: 1px solid #FFBB65;background: #FFE0B6 url(../images/typo/media.png) 10px 50% no-repeat;} span.note {color: #B79000;border: 1px solid #E7BD72;background: #FFF3A3 url(../images/typo/note.png) 10px 50% no-repeat;} span.cart {color: #666;border: 1px solid #C5C5C5;background: #E6E6E6 url(../images/typo/cart.png) 10px 50% no-repeat;} span.camera {color: #666;border: 1px solid #C5C5C5;background: #E6E6E6 url(../images/typo/camera.png) 10px 50% no-repeat;} span.doc {color: #C76E34;border: 1px solid #FFBB65;background: #FFE0B6 url(../images/typo/doc.png) 10px 50% no-repeat;} HOWEVER.... WHEN I ADD THE FOLLOWING "STYLES" / CODE TO THE CSS ABOVE... MY EDITOR ONLY RECOGNIZES A FEW OF THE ITEMS?!?! I WAS TOLD I NEEDED TO DO SOMETHING WITH THE CLASS SELECTOR NAMES? Code: .general_heading{ background: url(http://mysite.com/components/com_magazine/layouts/images/bg/bg10.png) #3A3A3A repeat-x 0px 0px; display: block; height: 26px; line-height: 26px; text-indent: 8px; font-size: 12px; font-weight: bold; color: #cccccc; font-family: 'Arial Narrow', Arial, Helvetica, sans-serif; margin: 0px 3px 3px 3px; text-transform: uppercase; } .heading { background: url(http://mysite.com/components/com_magazine/layouts/images/bg/bg9.png) #890605 repeat-x 0px 0px; display: block; height: 28px; line-height: 28px; text-indent: 8px; font-size: 12px; font-weight: bold; color: #cccccc; font-family: 'Arial Narrow', Arial, Helvetica, sans-serif; margin: 0px 3px 3px 3px; text-transform: uppercase; } /*side bar*/ /* The box sorrounding the side bar*/ div.box_sidebar{ background-color: #F7F7F7; border: 1px solid #C0D5EC; color: #333333; float: right; margin: 40px 10px 10px 10px; padding: 10px 10px 10px 10px; top: 40px; } div.sidebar { float: left; width: 29%; } img.user_image_class{ margin: 5px 5px 5px 5px; } /* article title*/ .article_title, a.article_title{ } .background-image img{ margin: 10px 10px 10px 10px; padding: 10px 10px 10px 10px; } /*author mini profile*/ .box_author{ background-color: #F7F7F7; border: 1px solid #C0D5EC; color: #333333; margin: 30px 20px 20px 10px; padding: 5px 5px 5px 5px; } /* descriptions*/ .description{ background-color: #ffffff; color: #333333; font-size: 12px; margin: 3px 3px 3px 3px; } .description div p{ background-color: #ffffff; color: #333333; font-size: 12px; margin: 3px 3px 3px 3px; } /*intro*/ .intro_horizontal { background-color: #ffffff; color: #333333; display: block; font-size: 12px; margin: 5px 5px 5px 5px; } .quotes { padding: 0 10px 0 10px; width: 230px; } .quotes div { background-color: #ffffff; color: #333333; font-size: 14px; font-weight: bold; } .quotes img { padding: 0px 10px 0px 10px; } /* Alignment of the text of the sidebar area*/ .sidebar_area { text-align: left; } /* Alignment of the image in the sidebar area*/ .sidebar_area img{ float: right; } .sidebar_article_title { background-color: #ffffff; color: #666666; font-size: 12px; font-weight: bold; text-decoration: none; } hr { background-color: #ffffff; color: #ebebeb; height: 0px; border-style: dotted; } TIA RYAN |