|
CSS - Advanced Css Selectors
I want to style something based on what comes after it. If a div is the last to have the class "combinedyes" I want to make the text red for example. I've experimented with:
#EditMedHistoryDisplay div.cmMed.combinedyes + div.cmMed.combinedno But that styles the combinedno element... Any ideas? Code: <div id="EditMedHistoryDisplay"> <div class="cmMed odd combinedyes">Testosterone 2 mg <span class="medicationDelMethod">Cream-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21158" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div> </div> <div class="cmMed even combinedyes">DHEA 10 mg <span class="medicationDelMethod"> Cream-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21194" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div> </div> <div class="cmMed even combinedyes">Test 10 mg <span class="medicationDelMethod"> Cream-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21184" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div> </div> <div class="cmMed even combinedno">Testosterone 2 mg <span class="medicationDelMethod"> Patch-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21038" title="Click to edit">It's a patch...</div> </div> </div> Similar TutorialsHi all, could someone please explain to me the difference between ID selectors - #idselector {ksjdfkjd} and class selectors - .classselector {askdjfak} ? I am just becoming more familiar with CSS and I'm not sure when I should use which. Thanks It would be a great idea to have some html type viewer, or FF plugin that would show you the slectors of an html document. Does anyone know of something like this ? I'm trying to learn css and if I could just highlite some text in the html document and it would display the possible selectors for that selection I think it would be a great learning aid. Any ideas ? I am displaying a Google feed on my site through an asp script that converts RSS to HTML. There is no room for images where the feed is, so we just take them out by setting display: none;. That solves one issue, but then the text is way off. I'm having trouble acessing the text after the picture so I can use absolute positioning and keep it left justified. See http://www.lsuhospitals.org/Hospitals/Bogalusa_Med_Center.htm for an example. Here's the RSS to HTML source tabbed out as best I could. This conversion isn't perfect and still needs some work. What's in red is what I need CSS access to, but only when an image is present. Whew! Code: <html><head><title></title><LINK REL="StyleSheet" HREF="../../StyleSheets/HCSD.css" TYPE="text/css" MEDIA="screen"><style>body{margin: 0px; padding:0px; background-color:white;}</style></head><body>
<table width="140px" class="BodyTextHeading1" cellspacing="0" cellpadding="0">
<tr>
<td>
BMC IN THE NEWS
</td>
</tr>
</table>
<table>
<tr>
<td class="rsscontainer">
<br>
<table border=0 width= valign=top cellpadding=2 cellspacing=7>
<tr>
<td valign=top>
<a href="http://news.google.com/news/url?sa=T&ct=us/0-0&fd=R&url=http://www.edailynews.info/articles/2007/01/04/news/news04.txt&cid=0&ei=RKemRfDvO8qMsgGgwJmXDQ">
Two perish in accidents as 2006 comes to close
</a>
<br>
<font size=-1>
<font color=#6f6f6f>
Bogalusa Daily News, LA -
</font>
<nobr>
Jan 4, 2007
</nobr>
</font>
<br>
<font size=-1>
Bonnett said the incident is still being investigated and oxicology tests are still being conducted. The initial 911 call was made to WPSO and came from the LSU-<b>Bogalusa Medical Center</b> where Johnson had been brought by private vehicle.
</font>
<br>
</table>
</td>
</tr>
<tr>
<td class="rsscontainer"><br>
<table border=0 width= valign=top cellpadding=2 cellspacing=7>
<tr>
<td width=80 align=center valign=top>
<a href="http://news.google.com/news/url?sa=T&ct=us/1i-0&fd=R&url=http://www.edailynews.info/articles/2007/01/02/news/news04.txt&cid=0&ei=RKemRfDvO8qMsgGgwJmXDQ">
<img src=http://news.google.com/news?imgefp=lpU8D0_YzTEJ&imgurl=www.edailynews.info/content/articles/2007/01/02/news/news04.jpg width=79 height=37 alt="" border=1>
</a>
</td>
<td valign=top>
<a href="http://news.google.com/news/url?sa=T&ct=us/1-0&fd=R&url=http://www.edailynews.info/articles/2007/01/02/news/news04.txt&cid=0&ei=RKemRfDvO8qMsgGgwJmXDQ">Tim Augustine, Regina Runfalo to reign over MCCA XXVII festivities</a>
<br>
<font size=-1>
<font color=#6f6f6f>
Bogalusa Daily News, LA -
</font> <nobr>Jan 2, 2007
</nobr>
</font>
<br>
<font size=-1>Runfalo, a registered nurse, serves as assistant administrator of LSU <b>Bogalusa Medical Center</b>, where she has been employed 26 years.
</font>
<br>
</table>
</td>
</tr>
</table>
And here are the relavent styles that I created. I have consulted my book "The Web Professional's Handbook" by glasshaus publishing. They have a decent CSS section (selectors on pgs. 96-97), but to no avail. Code:
.rsscontainer {
font-family: Verdana;
color: black;
width: 140px;
background-color: white;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.rsscontainer table tr td font{
font-size: 10px;
line-height: 1.3;
}
.rsscontainer table tr td a img {
display:none;
}
.rsscontainer table tr td a {
font-family: Verdana;
font-size: 10px;
color: #461D7C;
text-decoration: underline;
}
.rsscontainer table tr td a:hover {
font-family: Verdana;
font-size: 10px;
color: #7549B1;
}
.rsscontainer table tr td a:visitied {
font-family: Verdana;
font-size: 10px;
color: #7549B1;
text-decoration: underline;
}
I'm trying to get my head round these ... A) .search input, .search .commonButton { margin-right: 7px; vertical-align: middle; } I know what the style parts do, but I don't understand what the first two lines are doing. I think the second line is saying to apply the style to all .commonButton classes within a .search class ??? Don't know about the first. -------------------------------------- B) .buttons div { white-space: nowrap; } does this mean the style is applied to any div elements within the .buttons class? I am trying to style the <hr> in the following peice of my page using css selectors. I have used,
Code: td div hr {...}
, but this affects other hr's outside of this menu. Is there a way to make this work without having to give the hr a class name? Thanks. Code:
<td width="140" bgcolor="#EFBE56" class="Menu_WhiteText_GoldBkgd"><div align="left">
<p class="side_menu_white"><br>
<a href="In-The-News.htm" style="color: white">in the news...</a> </p>
<p class="side_menu_white"> <a href="Press_Releases.htm" style="color: white">press releases</a> </p>
<p class="side_menu_white"><a href="Newsletter.htm" style="color: white">newsletter</a> </p>
<p class="side_menu_white"><a href="Multimedia.htm" style="color: white">multimedia </a></p>
<p class="side_menu_white"><a href="../About/annual_reports.htm" style="color: white">annual reports</a> </p>
<p class="side_menu_white"><a href="Contact.htm" style="color: white">contact media relations & communications</a> </p>
<hr>
<p><span class="Menu_WhiteText_GoldBkgd"> <a href="PhotoRelease-ConsentForm.pdf" target="_blank">consent form</a> </span> <span class="Body_Text2"><span class="Body_Text"><br>
<br>
</span></span></p>
</div></td>
I am using CSS in the context of an SVG document. In SVG, we use element names like 'rect', 'circle', & 'polyline' rather than 'p', 'table' and 'form' as HTML coders are familiar with. I am trying to apply a generic style to all 'rect' elements, and then modify that style with class styles. The styles: Code:
rect{
fill: black;
stroke: yellow;
pointer-events: none;
.... other SVG styles ....
}
.frame{
fill: black;
stroke: magenta;
--- other SVG styles....
}
In the document, I use a 'rect' element, and apply the class style to it: Code: <rect class="frame" height="5088" id="Rect_37" width="6688" x="-1008" y="-1728" /> As you may notice, there appears to be a contradiction in the styles specified by the two selectors: 'rect' and 'frame'. One would have the element rendered with a magenta outline, while the other would outline with yellow. In practice, the stroke rendering seems to inherit from the 'rect' element style, although this seems counter-intuitive to me (class styles seem to be more specific than element styles). In researching this, I have actually found nothing that clarifies the question. Even the W3C site seems to ignore the case, as far as I can tell. Is this even valid CSS? If yes, what rule dictates how the document will get rendered? I have passed the entire SVG doc through the XML validator, but the CSS validator only accepts HTML & raw CSS. What would be the correct method of applying a global per-element-type style, but modifying it for specific instances of such elements? I am trying to keep the document as small as possible, and reduce the need for redundant style information, as this seems to have a significant impact on performance of the rendering (presently only tested using Mozilla Seamonkey) I'm pretty much of a CSS newbie, so feel free to correct whatever jargonology I've mangled. Pointers to definitive references most welcome. Thanks. --- rod. Hi all, I'm having an issue using CSS3 selectors. I'm not quite sure if this is even possible but here it goes. Imagine the HTML below: html4strict Code: Original - html4strict Code <tr> <th><input type="checkbox" name="cb" /></th> <td>Something here</td> <td>Someting here also</td> </tr>
Is it possible with CSS to utilize the :checked selector on "tr th input:checked" and somehow set the background color for the td-s? I've tried several combinations but to no avail. And as far as I know there's no parent selector or anything that lets you traverse backwards and I'm trying to avoid JavaScript as much as possible. I'm using Firefox 2.0.0.12. Hi, I'm building a page that imports two blog feeds from feedburner displaying them in separate divs. I'm a beginner at CSS and could use some help manipulating the styles of these blog feeds separately (which are linked to an external style sheet), but I don't know enough about context dependent css and selectors. I've tried researching a solution but haven't found an answer specific to what I'm doing. I've given the divs their own IDs ("newsblog" and "newcontent"). Here's an example of some of Google's css: div.feedBurnerFeedBlock li a:link { font-size: 20px; font-weight: bold; font-color: #9F0; font-family: Verdana, Geneva, sans-serif; text-decoration: none; list-style-type:none; } I need to take that code and make it specific to one div or the other, instead of applying to both. Any help or advice is greatly appreciated. Thanks, Jeff i have two p tags one after the other.. <p>text</p> <p>text</p> and I did: Code:
#head p {
float:left;
margin-top:2%;
font-style:oblique;
font-size:150%;
color:green;
}
#head p+p {
float:right;
font-size:75%;
color:red;
}
the problem is that if i do margin-top:4% to the first p; this also changes that in the adjacent p? is this correct? Here's a handy tip for you ... if like me you split your big stylesheet up into smaller ones, put them into a linked stylesheet and import them, like so: PHP Code: <link rel="stylesheet" type="text/css" href="main.css"> and in the CSS file itself ... PHP Code: @import url(css/file1.css); @import url(css/file2.css); @import url(css/file3.css); @import url(css/file4.css); some of you no doubt will already do this. here's the crux tho. if you also have some miscellaneous CSS which doesn't fit in any of the extra files and are going to include them in the linking [main] file, then you must include them after the import statements. if you don't Mozilla will ignore the imports and the extra files will not be included in the rendering. code should be like this: PHP Code: @import url(css/file1.css); @import url(css/file2.css); @import url(css/file3.css); @import url(css/file4.css); body { direction: rtl !important; } IE get's this correct regardless of the order. Hi everyone, So I've been coding for years and had drawn away for the design/css part, so I need some refreshing. I've tried the greater than / less than "operators" between selectors in my css declaration but to no avail. Basically what I want to do is example: Code: <form><!-- really doing this basic just to show the point -->
<fieldset>
<!-- inputs here -->
</fieldset>
<fieldset>
<fieldset><!-- ### nested fieldset inside fieldset, don't want to affect these child selectors -->
<!-- input bla -->
</fieldset>
</fieldset>
</form>
So as you can see in my brief exampl above, there's two parent selectors and one child inside the second one. I only want to change the properties of the parent ones, so that a fieldset INSIDE a fieldset doesn't get affected, and I was hoping anyone here might be able to shed some light on how to achieve this. Many thanks I have the following CSS styles: Code:
#content p { font-size: 24px; }
.smalltext p { font-size: 12px; }
Then, I create a #content div in my HTML with three paragraphs in it. I want the middle paragraph to have the .smalltext class, like this: http://www.toprival.com/temp/css_question.gif With the CSS the way I have it, the font size (12px) of the .smalltext paragraph is ignored. But if I change the CSS so both selectors are IDs, or so both are classes (and update the HTML accordintly), it works. Why is that? Ok here is my layout http://codingcore.com/template.html there are no tables at all its all css floats but the only problem is that the left and right menus go over the copyright bar on the bottom the middle box doesnt the copyright stays 45px from the middle box but i want it to be under all the boxs because right now the menus go over the copyright i want its copyright to be below the boxs on the right and left ive tried many things but I cant seem to get it to work i dont want to use tables ither Thanks Matt Hi everyone. I'm looking for some help rendering a list using css. Basically I have a list in this format: Code: <ul>
<li>shirts</li>
<li>jackets
<ul>
<li>casual jackets</li>
<li>formal jackets</li>
</ul>
</li>
<li>suits</li>
</ul>
And I would like to render it something like: Code: shirts jackets > casual jackets formal jackets suits All the text needs to be floated left so it will wrap to the next line. I'm able to float the top level list items correctly i.e. "shirts jackets suits" using: Code: <ul id="menu">
<li>shirts</li>
<li>jackets</li>
<li>suits</li>
</ul>
#menu, #menu ul {
list-style:none;
}
#menu li {
float: left;
width:5em;
}
the problem I have is getting the nested lists to appear alongside the parent items instead of below. When I add the nested lists I see something like: Code: shirts jackets suits
casual jackets
formal jackets
Maybe this just isn't possible but if anyone could help me I'd sure appreciate it! Thanks! Toby Hi! 1/ Is display:table; supported in IE6? In IE7? Searched the web but found contradictory answers. 2/ In Opera 9.02, when declaring a div display:table; and then applying padding to it (the div), there is a bug: the padding is contained in the width of the div (making the "content" or "room" available in the div smaller) rather than added tp the width of the div. Is there a fix for this? Thanks I am trying to create a completely non-uniform layout for one of my clients using only CSS. I would like to accomplish this using only floats that are cross-browser supported. The layout is split up into 9 different panels that need to be positioned correctly. Is this achieved simply by using float and clear? I have been experimenting and have been failing. What about positioning? Would kind of positioning would I use to arrange something inside of a parent div? See attached file for layout. P.S. I know I can get this exact layout done using tables, but I would much rather do this with some "simple" CSS. html code: Code: <div id="sidebar"> <h2>South Winds Park Info</h2> <ul> <li><a href="park-info/contact-info" title="Contact Info">Contact Info</a></li> <li><a href="park-info/homes-for-rent" title="Homes for Rent">Homes for Rent</a></li> <li><a href="park-info/homes-for-sale" title="Homes for Sale">Homes for Sale</a></li> <li><a href="park-info/office-services" title="Office & Services">Office & Services</a></li> <li><a href="park-info/meet-the-staff" title="Meet the Staff">Meet the Staff</a></li> </ul> <h2>South Winds Resources</h2> <ul> <li><a href="calendar" title="Calendar">Calendar</a></li> <li><a href="resources/forms-and-documents" title="Forms and Documents">Forms and Documents</a> <ul> <li><a href="resources/forms-and-documents/by-laws" title="By Laws">By Laws</a></li> <li><a href="resources/forms-and-documents/prospectus" title="Prospectus">Prospectus</a></li> <li><a href="resources/forms-and-documents/rules-regulations" title="Rules & Regulations">Rules & Regulations</a></li> </ul> </li> <li><a href="resources/special-events" title="Special Events">Special Events</a></li> <li><a href="resources/maintenance" title="Maintenance">Maintenance</a> <ul> <li><a href="resources/maintenance/fees" title="Fees">Fees</a></li> <li><a href="resources/maintenance/trash" title="Trash">Trash</a></li> </ul> </li> <li><a href="resources/faq" title="FAQ">FAQ</a></li> </ul> </div> CSS Code: Code: #sidebar ul{
margin:10px 0 30px 0; padding: 0;
text-align:right;
}
#sidebar li a, #nav li {
display:block;
}
#sidebar li {
list-style: none;
position: relative;
}
#sidebar li a {
padding: 1em 2em;
text-decoration: none;
color: white;
background:url(images/design/listBottomLine.png) bottom right no-repeat;
}
#sidebar li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
/* Submenu */
.hasChildren {
position: absolute;
width: 5px; height: 5px;
background: black;
right : 0;
bottom: 0;
}
#sidebar li ul {
display: none;
position: absolute;
left: 100%;
top: 0px;
padding: 0; margin: 0;
z-index:100;
}
#sidebar li:hover > ul {
display: block;
}
#sidebar li ul li, #nav li ul li a {
float: none;
z-index:1000;
}
#sidebar li ul li {
_display: inline; /* for IE6 */
}
#sidebar li ul li a {
width: 150px;
display: block;
background-color:#2c9091;
}
This is a vertical menu (in the sidebar of a wordpress site). It works everywhere, except IE7. I have jquery that overcomes the hover issue for IE (I know it works because I got it from http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/ I have searched the internet for a solution: using csshover.htc (doesn't work) The one issue I think it might be is because I'm using an ancher tag, but using hover on the li element. (the ancher is child of li) I have read tutorials on this, so my anchor is display block, it has the width and height fixed. The other is I'm using z-index to pull the elements in front. I don't know if IE7 has issues with z-index. I'm sorry I cannot show a working (broken) example, it's a wordpress site on my local machine. I even used the exact css code from the tutorial linked above (slightly modified to be vertical not horizontal) which he says it works in every browser. What else could it be? Since the code should work. What else around this menu could be my problem? Thank you so much for your help (ready to pull my hair out) Unfortunately I am going to have to get more involved in CSS rather than happily concentrating on PHP development. We have realised that getting our designers to CSS stuff is just costing us time as they lack the experience and don't understand the semantics. Anyway, as such I need to find out a few things I know but don't know if you know what I mean. Where can I find out the official definitions of CSS operators... * html for example..what the * does. class1>class2...what the > does...stuff like that. Thus far I've done all of the CSS courses on lynda.com and have read css Zen Design and Transcending CSS, both GREAT books. What would be a good "next step book" into advanced CSS coding or have I done it all? I am attempting to construct a layout that is a bit more styled than the typical. I have seen it multiple times and would love it for my main page. It has a left column and a right column In the right column, I would like to split that into two equal columns, width-wise and then underneath that I would like to have three equal columns under the top two which can span as far down as possible. I attempted it using code that I have laying around, and of course, it works in IE (more or less) but absolutely dies miserable in Netscape and Firefox. the link to the test page is http://www.test.angrybrownman.com and the css sheet would be www.test.angrybrownman.com/style_test.css The css for the site (since I am not sure the link will link) is as follows: #container { width:775px; margin:0px auto; background-color:transparent; border:1px solid #424242; line-height: 100%; background-image:url(cont_bg.jpg); background-repeat:repeat-y; } #top { padding:0px; height:100px; background-image:url(header.jpg); background-repeat:no-repeat; background-position:top left; background-color:#FFFFFF; } #main { padding:0px; height:200px; background-image:url(main.jpg); background-repeat:no-repeat; background-position:top left; background-color:#fff; } #mid_box { padding:0px; height:200px; background-color:transparent; margin:0px 0px 0px 258px; /*background-image:url(mid_spacer.jpg); background-repeat:no-repeat; background-position:top left;*/ } #leftnav { float: left; width: 259px; margin-top:0px; padding:0px; } #rightnav { float: right; width: 150px; margin-top:0px; padding:0px; background-color:transparent; border-left:1px solid red; /*border-right:1px solid green;*/ border-top:2px solid #003366; } #center { margin-left: 259px; margin-right: 0px; margin-top:0px; padding:0px 0px 10px 0px; background-color:#fff/*#649DD8*/; border-top:2px solid #003366; } #leftbox { width: 168px; float: left; background-color:transparent; } #rightbox { width:167px; float: right; background-color:transparent; } #middle { margin-left: 169px; margin-right:168px; margin-top:0px; padding:0px 0px 0px 0px; background-color:transparent; } #left_top { width: 250px; float: left; background-color:transparent; } #right_top { width:250px; float: right; background-color:transparent; } I know it is a heavy duty question. The test page at that link has the css placed in each div af what I am trying to do. I am close...I think...I am just not understanding the model somehow to keep it together in the other 2 big browsers. Any help would be appreciated very, very much. Thanks a million. Jon |
|||||||