I'm not very good with CSS and I need some help.
I have a table where i want every other row to be gray and the alternating rows to be white. but i only want it to happen on one particular table.
I added some code to my CSS:
tr:nth-child(even) {
background: #CCC;
}
tr:nth-child(odd) {
background: #FFF;
}
but the problem is that its affecting every table on my site.
I haven't found any examples where it applies only to a certain class. Is that possible? I want it to apply only to:
table.dashboardtable
Use the CSS descendant combinator (juxtaposition) as usual:
table.dashboardtable tr:nth-child(even)
table.dashboardtable tr:nth-child(odd)
nth-child and nth-of-type accept odd and even as well as a formula like an+b, where a and b are constants.
Usually you want to use nth-of-type, which will only apply to the type you specify. That will leave out other elements. If you want every even tr to have that background color, then try:
tr:nth-of-type(2n){
background: #CCC;
}
tr:nth-of-type(2n+1){
background: #FFF;
}
More info on CSS Selectors
Hope this makes sense of it.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#customers tr:nth-child(even){
background-color:white;
}
#customers tr:nth-child(odd){
background-color:Lavender;
}
</style>
</head>
<body>
<p>In your markup define your table:</p>
<table id="customers"></table>
</body>
</html>
Related
I am trying to target the "Holders" value on this page (364578 addresses at time of writing this).
I have tried a few different css targets with no success:
.table tr:nth-child(3) td:nth-child(2)
as well as
#ContentPlaceHolder1_tr_valuepertoken.next('tr td:nth-child(2))
Here is a picture of the html structure
How can I target the "Holders" value on this page?
Sorry I did not noticed the css tag for this question.
Use this for css:
tr:nth-of-type(3) td:nth-of-type(2) { background: red; }
To target that using css, you can add an id to that element.
This would look like:
<td id="id">Holders:
</td>
that way you can modify it using css.
#id {
/*Your css*/
}
hope this helps!
Note: the /*Your css*/ is just a comment. Remove it before you add your actual css.
You can use this way like a matrix:
tr:nth-of-type(3) td:nth-of-type(2) { background: red; }
basically I have already solved my problem, but I would like to understand why I needed to do it how I did it. Therefore I created a short example, available at https://jsfiddle.net/herbert_hinterberger/9x22u934/
Now I wanted to ask why I need to use the !important rule inside
.navbar-brand {
color: #eae8e8 !important;
}
to change the color of .navbar-brand? As of my understanding the custom CSS should overwrite the bootstrap default css rules. But for any reason the bootstrap default CSS rules are applied before the custom CSS rules if I do not use the !important rule. See
Can anybody please explain why I need to use here the !important rule?
Best regards,
Herbert
You don't need to use the !important every time.
The rule is, whatever css comes later is taken. So, if you have
.aClass {
color:red;
}
in red.css
and
.aClass {
color:blue;
}
in blue.css,
and you include blue.css after red.css, the text having aClass will be blue.
You only use !important when you want one rule to override everything else.
Edit: After the OP's comment, the actual answer to this question is this.
In the bootstrap.css file, we have something like:
.navbar-default .navbar-brand {
color: #hashtag;
}
therefore, when you do:
.navbar-brand {
color: #newHashtag;
}
it doesn't change the color of .navbar-brand that is invoked by .navbar-default (You use this class through .navbar-default in your HTML). Here, .navbar-brand is a descendant of .navbar-default. But, when you put in the !important, it tells all .navbar-brands to change color.
So, if you do want to change the color of your .navbar-brand, try something like:
.navbar-default .navbar-brand {
color: #newHashtag;
}
For more information, read up on descendant selector combinators in CSS.
When you want to overwrite bootstrap CSS with your own, you need to include your custom CSS after bootstrap.
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
This is because the css selector bootstrap is using '.navbar-header .navbar-brand' has more specificity than yours '.navbar-brand'
see this http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
and try this
.navbar-header .navbar-brand {
color: #eae8e8;
}
Here is the best explanation for your Question
CASE: 1
<!-- HTML -->
<div class="blue box"></div>
/*CSS*/
div {
height: 200px;
width: 200px;
}
/*The Battle*/
.blue {
background-color: blue;
}
.box {
background-color: red;
}
In the Battle how wins? obviously last one i.e
.box {
background-color: red;
}
Background color red applied to div
Other Anwsers explain this case, writing custom css file after the bootstrap.css, it override bootstrap Styles
CASE: 2
ID vs. Class
<!-- HTML -->
<div class="box" id="box"></div>
/*CSS*/
div {
height: 200px;
width: 200px;
}
/*The Battle*/
#box {
background-color: blue;
}
.box {
background-color: red;
}
How Wins? obviously id Win, Id is declared as winner according to Rules of Specificity
Scores of elements according to specificity
inline-style = 1000 points (decided by css Specificity)
ID’s are worth a 100 points.
Classes are worth 10 points.
Elements are worth 1 point.
Example:
#content .sidebar .module li a{}
Score is :
#content =100; .sidebar, .module = 10 +10; li, a = 1+1
Total: 122
If we add one id at front as below We can overrides above mentioned style because the score of below mentioned style is 222
#main-container #content .sidebar .module li a{}
I have a table that is generated and filled with data in the code behind. I give it the CSS class test with the cssClass attribute. Now I want to give the odd and even rows different colors. But when I try to use the normal CSS code for it, it does not work.
This is my CSS code:
<style>
.test
{
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
}
</style>
and this is the code behind code where I add the cssClass
tableData.CssClass = "test";
You're trying to nest CSS rules which is only possible in less/sass etc.
Try this:
.test tr:nth-child(even) {
background: #ccc;
}
.test tr:nth-child(odd) {
background: #fff;
}
The :nth-child() selector is supported in all major browsers, except IE8 and earlier.
I'm trying to merge two CSS files from different vendors. The first one defines
body.mine div {border:1px solid red}
The second one
.blue-border {border:1px solid blue}
In the generated HTML, you can find
<div class="blue-border">hello</div>
This looks red, not blue. I can't modify the HTML, nor the first CSS code. My only "hope" is to modify the second CSS. Any hints? Thank you very much!
Example:
<html>
<head>
<style>
body.mine div {border:1px solid red}
.blue-border {border:1px solid blue}
</style>
</head>
<body class="mine">
<div>hallo</div>
<div class="blue-border">hello</div> <- looks red, not blue as I want
</body>
</html>
Just make the selector more specific:
body.mine div.blue-border {border:1px solid blue}
This tells the browser to look for a much more specific element: A div with a class of blue-border that is a child of a body element that has a class of mine.
Yours just said "select anything that has a class of blue-border" and this was way less specific than the previous selector.
http://jsfiddle.net/Kyle_Sevenoaks/tcWK5/
You just need a selector more specific than body.mine div, so that it overrides the less specific selector. Try something like:
body.mine div.blue-border {border:1px solid blue}
This could also be a perfect use case for !important.
.blue-border {border:1px solid blue !important}
I realise that the use of !important is often frowned upon, but .blue-border is obviously a utility class that only does one thing, which means that the class shouldn't be used if the intented result is a red border.
In this instance I would prefer !important over the use of an over qualified selector, because over qualified selectors could have a major performance impact.
If you desire to change any property in all elements with css, do NOT define this property in specific elements:
html body div#very .specific {
/* Any prop that is NOT the ones you want to apply generally */
margin: ...
font-weight: ...
/* NOT color, nor background, etc */
}
/* These now will catch in the above too */
.blue{
color: blue;
}
.back-yellow{
background: #ff0;
}
Explanation: the color and background will apply on all elements that don't have a more specific definition of color/background.
So, only define color in specific CSS path if you want to override the general rules.
I have a link inside a DIV. How can I change the color of this link inside this div. This code does not seem to work
<style type="text/css">
.someDiv
{
font-size:14px;
color:#c62e16;
}
</style>
<div id="someDiv">
SOne Text
</div>
Thanks.
ids are accessed by a pound sign (#), and classes are accessed by a period (.)
<style type="text/css">
#someDiv a
{
font-size:14px;
color:#c62e16;
}
</style>
<div id="someDiv">
SOne Text
</div>
use
.someDiv a {
font-size:14px;
color:#c62e16;
}
You are using the wrong selector. You have an id="someLink", and the CSS is looking for the class="someLink". Try with #someLink, it'll work.
div#someDiv a{
color: #hexcode;
}
That will work too, you use the selector to select ALL the elements of the type "a" in a div with the id="someDiv".
While you're using the wrong selector for someDiv you will usually need to set a colours separately:
#someDiv, #someDiv a {
color: red;
}