I am having trouble getting my CSS to look right. I want alternating colors in my table, but it doesn't seem to be working. Here is my CSS:
table.className tbody tr:nth-child(even){
background-color: white;
}
table.className tbody tr:nth-child(odd){
background-color: grey;
}
Your code looks good. Could be two things, your version of IE that you are using is to old (IE8 and below I believe doesn't support this), or you have these styles being set elsewhere with a !important attached to them.
Without seeing the HTML, there are a couple of possibilities:
The class name doesn't match
The tbody tag is missing (either way, tbody isn't needed in the CSS selector)
There are a couple of reason as to why this may not be working for you. First the CSS code that you are using is CSS3 and may not be supported in the browser you are using: http://www.impressivewebs.com/css3-browser-support/
Another reason this may not be working is that you have included the "tbody" tag in the CSS which indicates that your html table is setup as such. This is actually a tag that some developers forego, if you html table does not have a "" tag then you must remove it from the CSS in order for this to work.
Given that its been established that you are using IE8 which doesn't support :nth-child in CSS, you can achieve the same thing using jQuery for better cross-browser support:
$(function() {
$("table.className tr:nth-child(even)").css('background-color','white');
$("table.className tr:nth-child(odd)").css('background-color','grey');
});
Related
I am getting an html file as a string and I need to change the styling that are coming in to prevent it from changing the parent styling.
Instead of going through each style and changing it from
.inner-div{height: 50px;}
to
.outter-div .inner-div{height: 50px;}
on each element, I would like to do something like
.outter-div {
.inner-div{height: 50px;}
.inner-div2{height: 50px;}
}
however that does not work
Is there a way to have multiple attributes nested inside of another attribute, instead of having to add the parent on each attribute?
To do something like that, you'd have to use a CSS pre-processor.
Two popular candidates are Less and Sass.
Less and Sass extend CSS to provide extra features, including the ability to nest multiple attributes. This Less or Sass code is then fed into a pre-processor, which transforms it into standard CSS that a browser understands and can be deployed as part of your website or app.
Assuming the inner class names all start the same (with 'inner'), then this can be done with an attribute selector. like this:
.outer-div [class^=inner] {
height: 50px;
}
Demo
If this is not the case, then...use a CSS preprocessor like others have mentioned.
PS: just for the record...
CSS selectors level 4 has added the :matches pseudo-class in order to group selectors more easily.
The syntax looks like this: :matches( selector[, selector]* )
In your case, it would be:
.outer-div :-matches(.inner-div, .inner-div2 ) {
height: 50px;
}
You can read more about it this CSS-tricks post
NB:
Currently there is no browser support for :matches, however the :matches pseudo class was once called :any in the spec, supported with -moz- and -webkit- prefixes. See MDN on :any
Here's a working example for webkit using :any:
Codepen
I'm having some trouble with some CSS. I have a number of unique tables with a similar format name, and I need to set the background color on some of them. However, if I try and use a wildcard the style gets overwritten by a parent CSS file.
The background colour here works fine:
#AllProtectedServers1 td.status.online{
color: green;
background-color: yellow;
font-weight: bold;
}
But the background colour doesn't work here as it's being overwritten higher up (although everything else does):
td.status.online {
color: green;
background-color: yellow;
font-weight: bold;
}
I'm going to have 20+ tables all starting with "AllProtectedServers", so naming them all individually is going to make the css huge. Is there anyway I could use a wildcard? I've tried using div[id^='id_'] and similar selectors without any luck.
Anyone have any ideas of what I could use instead?
Update:
Please note the ID's are unique (AllProtectedServersCompany1, AllProtectedServersCompany2, etc), but they all start with AllProtectedServers. I want to create some CSS that will override the stylesheet for the table that is overriding my changes and use a wildcard so I don't have to specify each one.
Maybe this would help:
td.status.online
{
color: green;
background-color: yellow !important;
font-weight: bold;
}
Alpipego's comment is not correct. You're perfectly fine using ID selectors (#) for CSS. These can be overwritten by other ID selectors of the same or higher specificity (depending on page order) or the !important rule.
However, you want to avoid using !important as a CSS rule because that can back you into a corner and become a maintenance nightmare.
As a matter of fact what you need to learn about is CSS Specificity. I recommend reading the CSS: Specificity Wars for an entertaining but educational overview of how CSS Specificity works.
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Smashing Magazine also published an article on it that's more extensive:
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
You do want to be careful about not going crazy with specificity. ID's are (supposed to be) unique per page, so if you end up with a lot of deeply nested rules (#foo .bar .baz .goo), you're probably looking at needing some refactoring.
So, if you use Chrome, pop open the developer tool and look at the CSS selector and determine the specificity. All you need to do is:
a) Match the specificity but make your style come later in the DOM page order
or
b) Use a higher specificity
That's all there really is to it.
I hope that helps!
Cheers.
jmbertucci's answer is quite correct, if perhaps a little incomplete, I will expand with some examlpes.
One of the most overlooked aspects of CSS is specificity rules. As mentioned by jmbertucci please see:
http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
A little more googling will present a wealth of articles for you.
Let's take some base html and css and a bit of a guess as to what you have.
HTML
<table class="myTable">
<tr>
<td class="status online">Online</td>
<td class="status offline">Offline</td>
</tr>
</table>
CSS
table.myTable td.status
{
background-color:#fff;
}
td.status.online
{
background-color:#f00;
}
Fiddle
This will result in a white background for "online" as table.myTable td.status is more specific than td.status.online.
In this example we need to make the second selector more specific. As you mentioned adding an ID results in what you want as IDs have an extremely high specificity score and a very hard to over-write. So much so that some say never to use them*. A simple solution in this example is to add table to the seconde selector.
table td.status.online
{
background-color:#f00;
}
This results in a red background for "online"
Fiddle
Adding table may not work in your instance. YOu need to find the style rule that is being applied using Chrome Developer Tools or Firebug for Firefox and create a rule that is more specific.
If you provide more information I may be able to provide a more specific answer.
* A note on ID's ID's extremely high specificty is both their strenth and weakness. I believe they can be used, but with caution. If you want to style a specific part of a page in a specific manner, you may have a canditate for ID. Think along the lines of a header and footer before the days of HTML5. Another good example may be <section id="discalimer">, using an ID provies two benifits: it's an anchor for specific styling and it can be linked to, e.g: Disclaimer. A further read: http://www.zeldman.com/2012/11/21/in-defense-of-descendant-selectors-and-id-elements/
Keep in mind the arguments on weather to use IDs or not are a matter of optinion and their are good points on both sides. W3C, the standards guys, has no stance on this. If where you work has a coding guide, stick to that mandate. If you're unsure, don't use them in CSS to be safe. Most importantly keep IDs unique.
Andy68man, no wildcard needed, just use a class. Same class for all the tables if they all share the same properties. As in (first the HTML):
<table class="allProtectedServers"> ..... </table>
<table class="allProtectedServers"> ..... </table>
<table class="allProtectedServers secondClass"> ..... </table>
and the CSS:
.AllProtectedServers td.status.online { ... }
If there are one or more properties that only some of the tables have, create another class and give those particular tables both classes, as in the third line of HTML above.
Alternatively, if that still gets overruled by the CSS above, put a single div round all the tables or even the whole page (or there may already be one), give the div an id, and add that into your selector to increase it's specificty (your first bit of code above shows the extra id will be enough to overrule the other CSS that's causing your problem):
#myDiv td.status.online { ... }
I'm trying to get rid of the "border-top: 1px solid #dddddd;" for a specific table on my Bootstrap site.
Making the change using inline styling works as expected:
<td style="border-top:none; font-weight:bold;">
However, when I try to add this into the bootstrap.css file, the font-weight is applied, but the border-top is not:
<td class="notop">
CSS (have tried with '!important' as well):
.notop {
border-top:none;
font-weight:bold;
}
Any suggestions as to why this would work inline, but not via CSS?
Initially I was going to suggest that it was happening because of the cascading nature of style sheets, but you said you used !important
Just to check, your code with !important looked like this:
.notop {
border-top:none !important;
}
Sometimes CSS can be really funny with how !important is used.
Also, is the CSS sheet external, or embedded? Again, the order of sheets can often cause weird errors like this.
Edit: Also, if it's an external style sheet, make sure it's included after the bootstrap CSS.
Is it possible to use attribute selectors to partially-search an inline style attribute?
Can anyone find a way to get this bit of code working?
http://jsfiddle.net/v4xPY/1/
It seems that it's not possible to do this .hidden[style*="display: block"] + .below, nor even just [style]
The attribute selector you're trying to use isn't legit CSS, though it is a jQuery attribute selector. As far as I know, CSS is limited to [attribute=value], [attribute~=value] and [attribute|=value]. (derp, see below)
But, since you're already using jQuery to toggle the hidden div, it'd be a lot simpler to just toggle a class on the below div at the same time, rather than wrestling with the attribute selector (unless there's more to it than that).
Modified jQuery:
$(function() {
$('html').click(function() {
$('.hidden').slideToggle();
$('.below').toggleClass('yellow');
});
});
and CSS:
/* Margin of Below should reduce when hidden is opened */
.yellow {
margin-top: 10px;
background: yellow;
}
Fiddle here.
Edit: Okay, I was way off on the bit about the attribute selectors, it is legit CSS3; I don't know the details on browser support, though I'd guess it'd be supported in all the usual "modern" browsers. Also, there's apparently a problem with IE7 targeting the style attribute specifically. There's a pretty good write-up at http://www.impressivewebs.com/attribute-selectors/.
Once more: Though I can't find anything that explicitly confirms this, it looks like the attribute selectors only apply to attributes that are actually hardcoded into the html; basically it's just parsing strings, not examining the dom elements' "states" as such?
I'm trying to get ride of the last column in each table EXCEPT for the last table on the page. Is there a way to do this in css?
Here is what I have, and it doesn't seem to be working...
table:not(:last-child) tr td:last-child {
}
If this can't be done in css, please just let me know. :)
You may want to use table:not(:last-of-type) instead, in case there are other elements after that last table in your page:
table:not(:last-of-type) tr td:last-child {
display: none;
}
It also depends on the browsers you're testing in. No version of IE older than 9 supports the pseudo-classes being used.