|
CSS - Css Precedence Problem - Selector Specificity / !important
Hi,
I'm currently designing a Wordpress skin for someone and trying to style the navigation using CSS. Given that Wordpress is so popular, I expect that someone has encountered this before - but I can't find anything about this particular problem. Basically, I'm having problems achieving the correct precedence in the CSS cascade for certain elements of my page (navigation) design. In one part of the CSS I've had to use !important to get it to behave appropriately, but then I have another part which I need to be able to denote as "very important" but I don't think this is possible. I get the feeling that I can probably do this without !important since I'm aware that it is abusing its purpose a bit (i.e. accessibility?) and instead I could do it according to the selector's specificity if I understood it better: http://www.w3.org/TR/REC-CSS2/casca...cascading-order Here's a HTML snippet of what I have in the navigation: html4strict Code: Original - html4strict Code <div id="sidebar"> <ul> <li class="page_item current_page_item"> <a title="Home" href="home.php">Home</a> <ul> <li class="page_item"> <a title="Directors" href="home.php?page_id=12">Directors</a> </li> </ul> </li> <li class="page_item"><a title="News" href="home.php?page_id=3">News</a> </li> </ul> </div>
I'm then using the following CSS to attempt to style this part: css Code: Original - css Code #sidebar { float: left; width: 149px; padding: 1em 0; } #sidebar ul { list-style: none; } #sidebar ul li { margin: 0.4em 0.8em; padding: 1px; } #sidebar ul li a { font-size: 1.5em; font-weight: 500; padding: 0.3em; text-decoration: none; color: #000; background: #FFFACD; display: block; border: 1px solid blue; } #sidebar ul li a:hover { color: #bb2a2a; } #sidebar ul li ul li { display: none; } #sidebar ul li.current_page_item ul li, #sidebar ul li.current_page_parent ul li { /* sub-menu item */ display: inline; padding: 0; margin: 0; border: none; } #sidebar ul li.current_page_item, #sidebar ul li.current_page_parent { border: 1px solid green; } #sidebar ul li.current_page_item ul li a, #sidebar ul li.current_page_parent ul li a { /* sub-menu item link */ font-size: 1.2em; padding: 0.1em 0 0.2em 17px; background: #FFFACD url(images/sub-dot.gif) no-repeat left; } #sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item { color: #bb2a2a !important; border: none !important; } .current_page_item ul li a { color: #000 !important; border: none !important; } #sidebar ul li.current_page_parent ul li a, .current_page_parent a { border: none !important; } #sidebar ul li.current_page_item ul li a:hover, #sidebar ul li.current_page_parent a:hover { color: #bb2a2a; border: none !important; }
Using "View Formatted Source" in FF I'm finding that the color defined in ".current_page_item ul li a" is over-ruled by "#sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item". As you can perhaps tell, the current_page_item class is set on the list item that matches the current page, and if the current page is within a sub-section (i.e. it has a parent), current_page_parent will be set to the parent list item. This gives me a navigation such as: > Home >> Directors If we're on the Home page (as in example code above), I want that to have the red colored text, but Directors to be black. If Directors is the current page, I want that to be red, and Home to be black. Basically anything that isn't the current page should be black... At the moment (because .current_page_item ul li a doesn't seem to work) I'm getting red text for Home and Directors when on the Home page... I want Directors to be left black in this situation. N.B. It's more complicated than above because I also want to do some styling with borders on the top level list items (well, the a element within), but if someone can point out where I'm going wrong with the above I think I should be able to sort the rest out... Thanks in advance - please let me know if you need more details! Similar TutorialsHi 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 So, I have my CSS, works wonderfully (well, as expected) in FF2. Unfortunately, IE7, Safari 3, and Opera 9 all seem to ignore the whole stylesheet. UNLESS! Any one of the properties in the sheet is declared !important. Then, it applies the entire sheet the way I expect. What gives? The way I understand (understood?) specificity, the !important flag should only effect the specific line it's applied to, not the entire sheet. Right? I'm really confused. The stylesheet is included last, so all else being equal, should cascade properly and override the other sheets. Any ideas? I'm just going to use the !important for now, but I really don't like that. MPEDrummer i want to transfer this table to div's but i tried many times and i can not make it... so please i need help Code:
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="159" align="left" valign="top" style="background-color:#F00">first td</td>
<td width="460" class="middle" valign="top" style="background-color:#FF0">second td</td>
<td width="180" rowspan="2" valign="top" style=" background-color:#ff0000"><p>third td which contains rowspan =2 </p>
<p> </p>
<p>to let it finish with the footer</p></td>
</tr>
<tr>
<td height="60" colspan="2" align="left" valign="top" style="background-color:#C60"><br />
new tr that contains colspan = 2
<br />
© 2002 -
2010
, All Rights Reserved. </td>
</tr>
</table>
please help me i need to fix my problem quickly 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 Hi I've got a bit of a problem. I am making a website and what I want to do is create links with block background showing an image, which changes to just pink on a mouse over. what I did was make a div, give it classname menu_items and in that div put different hyperlinks. my code: Code: /* Menu picture caption */
.menu_items a { display: block; color: #FFF; background-color: #FF0066; text-decoration: none; padding: 5px; position: absolute; }
#menu_0910_dg000 { background-image: url('img/0910_dg000.jpg'); height: 90px; width: 140px; top: 100px; left: 0px; font-size: 12pt; }
#menu_0910_dg000:hover { background-image: none; color: #FFF; }
#menu_0910_dg601 { background-image: url('img/0910_dg601.jpg'); height: 90px; width: 140px; top: 100px; left: 150px; font-size: 12pt; }
#menu_0910_dg601:hover { background-image: none; color: #FFF; }
#menu_0910_dg200 { background-image: url('img/0910_dg200.jpg'); height: 90px; width: 140px; top: 100px; left: 300px; font-size: 12pt; }
#menu_0910_dg200:hover { background-image: none; color: #FFF; }
#menu_0910_elderly { background-image: url('img/0910_elderly.jpg'); height: 90px; width: 440px; top: 0px; left: 0px; font-size: 18pt; }
#menu_0910_elderly:hover { background-image: none; color: #FFF; }
#menu_0910_demos { background-image: url('img/0910_demos.jpg'); height: 90px; width: 890px; top: 200px; left: 0px; font-size: 20pt; }
#menu_0910_demos:hover { background-image: none; color: #FFF; }
Code: <div class="menu_items"> <a id="menu_0910_dg000" href="0910_elderly.html">Assignment: DG000 Introducing Competency-Centred Learning </a> <a id="menu_0910_dg601" href="0910_elderly.html">Assignment: DG601 Digital Video</a> <a id="menu_0910_dg200" href="0910_elderly.html">Assignment: DG200 Creative Programming for Designers</a> <a id="menu_0910_elderly" href="0910_elderly.html">Project: Elderly Interacting with the Digi-world</a> <a id="menu_0910_demos" href="0910_elderly.html">External: Demos Bar Committee</a> </div> You can see that I first used the nested selector .menu_items a, but this doesn't work with hover, so .menu_items a:hover doesn't work. Why not and how to fix?:S gr Bram Why does my third style rule have no effect? I thought the "A > B" was read as applying the rule to B if it was a child of A? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style>
div.large_title {
font-family: Trebuchet MS;
font-size: 18pt;
line-height: 20pt;
color: #003366;
}
div.quickpick {
border: 1px solid #003366;
border-collapse: collapse;
width: 250px;
text-align: center;
}
div.quickpick > div.large_title {
font-weight: bold;
}
</style>
</head>
<body>
<div class="quickpick">
<div class="large_title">Test</div>
</div>
</body>
</html>
Also, how can I add top and bottom margin to a text string? Do I use Margin or Line Height? I was playing around with CSS transitions, and I came across I problem I haven't been able to figure out. I have my a:links set up to fade to a different color and rise by 3 pixels when hovered over. But if the link is also an image, I want the image opacity to fade in without being raised up the 3 pixels. I would have thought simply adding "bottom: 0" to a img:hover would negate the raising, but apparently not. I'm not an expert in CSS specificity, but it seems like it's not a specificity issue since a img:hover is slightly more specific than a:hover. What can I do to prevent the image links from rising the 3 pixels on hover? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="css/styles.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
body {
background: #c44032;
color: #f4f1de;
font-size: 20px;
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
}
a:link, a:visited {
color: black;
position: relative;
-webkit-transition: color .25s ease-out .1s, bottom .25s ease-out .1s;
transition: color .25s ease-out .1s, bottom .25s ease-out .1s;
}
a:hover {
color: #ff6a5a;
position: relative;
bottom: 3px;
-webkit-transition: color .15s ease-out, bottom .15s ease-out;
transition: color .15s ease-out, bottom .15s ease-out;
}
a:link img {
opacity: .5;
border: 1px solid #c44032;
padding: 3px;
-webkit-transition: opacity .25s ease-out .1s;
transition: opacity .25s ease-out .1s;
}
a:link img:hover {
opacity: 1;
bottom: 0;
border: 3px solid white;
padding: 1px;
-webkit-transition: opacity .15s ease-out ;
transition: opacity .15s ease-out;
}
</style>
</head>
<body>
<p>Here is a <a href="#">text link.</a></p>
<a href="#"><img src="http://www.toprival.com/temp/balloon.jpg" height="64" width="64" border="0"></a>
<a href="#"><img src="http://www.toprival.com/temp/cat.jpg" height="64" width="64" border="0"></a>
<a href="#"><img src="http://www.toprival.com/temp/bee.jpg" height="64" width="64" border="0"></a>
</body>
</html>
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. I have this navigation menu I made for my online catalog that is comprised of some 300+ links that display in 3 levels of CSS-controlled menues. A root UL and 2 levels of subULs. It's located here . The menues all work fine except for a small area where the first submenu overlaps the root menu. Illustration . The problem is in mousing from one link in the list in the first submenu to the next link in the same list. (below or above) As the mouse pointer moves between the links, the menu changes to the sublist for the next link in the root menu instead of the next link in the already open submenu. The second level submenu (sub-submenu) doesn't have any problem. Links in the opened submenu can be moved between successfully if the pointer is moved out to an area that isn't shared with the root menu. Making any sense? This is HTML for the basic structu HTML Code: Original - HTML Code <table><tr> <td class="linktd"> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Category</a> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Subcategory</a> <ul class="folderul"> <li class="nonfolderli"><a class="submenua" href="http://www.mydomain.com">Subsubcategory</a> </li> </ul> </li> </ul> </li> </ul> </td> </tr></table> <table><tr> <td class="linktd"> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Category</a> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Subcategory</a> <ul class="folderul"> <li class="nonfolderli"><a class="submenua" href="http://www.mydomain.com">Subsubcategory</a> </li> </ul> </li> </ul> </li> </ul> </td> </tr></table> These are the two CSS lines that are supposed to control the displays. css Code: Original - css Code ul.folderul ul.folderul, li.folderli:hover ul.folderul ul.folderul { display: none } li.folderli:hover ul.folderul, li.folderli:hover li.folderli:hover ul.folderul { display: block }
ul.folderul ul.folderul, li.folderli:hover ul.folderul ul.folderul { display: none }
Maybe my understanding is deficent, but I haven't been able to find the problem and I'm hoping someone of you can point it out for me, please? Hi all, I have been teaching myself CSS for a website I am making, which has all been running smoothly until an issue today. Basically the issue is with a .class DIV nested inside a #id DIV.. Code:
<div id="wrap">
......
<p>...</p>
.......
<div class="info_box">
........
<p>.....</p>
......
</div>
.......
</div>
Using CSS, i set the font color (among other things) for <p> to be different in the "wrap" id and "info_box" class.... and I was shocked to find that the styling I had written for the class was ignored, and it was using all the styling specified for the ID. After searching, I found that this is because of specificity, in which the #id has a higher specificity. Although I now know the cause, i am not sure what I should do? I would like to be able to keep "info_box" as a .class, because I would use it more than once on a page. The only solution I can think of is to make the "wrap" a .class, but this does not seem logical, as I only use it once. Please Help! Hello, I'm an amateur with CSS, and would appreciate if you could take some time to help me out! I have a CSS rule to render all bullets in my page with a different icon, including on the sidebars. But there's one single list (a secondary navigation bar) where I do not want any bullets. I am trying to override it, but am unable to. I'd be glad if you could review my CSS and tell me where I'm going wrong. Thanks a Ton! Code:
.sidebar li {
border-top:dashed #cccccc 1px;
}
.sidebar ul li {
padding:0 0 0 1.5em;
list-style-type: none;
list-style-image: none;
background-image: url(img/menu-leaf.gif);
background-repeat:no-repeat;
background-position: 0.3em 0.6em;
}
This is my navigation block Code:
#navigation-secondary a {
display:block;
color:#ffffff;
}
#navigation-secondary a:hover {
background-color:#369; /* to change color when hovered over */
}
The following method to override it doesn't work Code:
#navigation-secondary , #navigation-secondary ul,
#navigation-secondary ul li, #navigation-secondary a {
list-style-type:none;
list-style:none;
}
ul.secondary-links li, ul.secondary-links ul li {
background-image:none;
border-top: none;
}
I should mention, the top border has been overridden, but not the background image. My html code snippet (rendered via php) is here Code:
<div class="sidebar" id="sidebar-left">
<div id="navigation-secondary">
<ul class="links secondary-links">
<li class="menu-138 first"><a title="Link1 site" href="/link1">Link1</a></li>
<li class="menu-139"><a title="Link2 site" href="/link1">Link2</a></li>
<li class="menu-140 last"><a title="Link3 page" href="/link1">Link3</a></li>
</ul>
<div style="clear: both;"/>
</div>
I'd be glad if you could help me out. Thanks! So the basic rules a 1) Author style sheets 2) User style sheets 3) Default browser sheets Now when you get into Author style sheets... You have: inline styles, header style information (<style type="text/css"> </style>), external style sheets and imported style sheets. I created a little example for myself to figure out the precedence. So that if all of these methods controled the same element, which method's style would come out the winner. To my suprise, the order in which you include them in the HTML document has an impact on the precedence. How so? Up until now I thought that the order of precedence was: inline styles, imported styles, external style sheets (<link />), and header style information. Code:
<html>
<head>
<link href="link.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
</head>
<body>
<p style="color: green;">What am I?</p>
</body>
</html>
As expected, the inline style wins. Code:
<html>
<head>
<link href="link.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
</head>
<body>
<p>What am I?</p>
</body>
</html>
The header style information wins. (regardless of position of @import) Code:
<html>
<head>
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
<link href="link.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>What am I?</p>
</body>
</html>
External style sheet wins (<link />). How does position influence precedence of: external style sheets (Both @import and <link />) and header style information? I have 2 css files. One main one that I am using Code: input[type="text"], select
{
background: #FFF !important;
}
I use that mainly for Firefox as without it the form fields are yellow. but I would like to override that have have one form field on this one page stick out and have it like this. Code: .CCfield {
color: Black;
background: #FFFF66;
}
Is this doable? How can I override it for this one field? Thanks I was in a meeting today talking about relative font sizes and how they can be problematic, because nesting elements may increase or decrease their font size. A co-worker said that I could use !important in my CSS to override/ignore the font-sizes of any nested elements. He seems to be way off. The W3C says that !important is really just about user versus author stylesheets, and apparently declaring !important in an author stylesheet doesn't do anything. So first question -- am I right about !important? It's only about user and author stylesheets, yes? Second question -- When dealing with relative fonts and nested elements, you have to start writing pretty complex rules, right? Is there any easy way in CSS without writing multiple rules to say "regardless of what element I place you in, always be x% font size..."? 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 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? 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 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'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 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. |
|||||||