Is it possible to set font-weight to normal without !important?
http://jsfiddle.net/DvBes/
<table id="tasks">
<tr><td>Name</td><td>SomeTask</td></tr>
<tr><td>Time</td><td class="gray">08/11/2011</td></tr>
</table>
table#tasks td:first-child+td {
font-weight:bold;
}
.gray {
color: gray;
font-weight: normal !important;
}
Your first css rule is much more specific than the second, because of this it will overwrite the second one if you don't use !important.
You could achieve the same without !important by changing .gray to table#tasks td:first-child+td.gray
The following code would do the trick:
#tasks .gray {
color: gray;
font-weight: normal;
}
You need to learn a bit about selector specificity, here's a good article http://css-tricks.com/855-specifics-on-css-specificity/ on it.
If you change your CSS:
.gray {
color: gray;
font-weight:normal;
}
to
table#tasks td:first-child+td.gray, .gray {
color: gray;
font-weight: normal;
}
Yes, give it greater specificity
table#tasks tr td.gray
Related
I'm using Sass 3.4.1 and BEM so my scss is:
.photo-of-the-day{
&--title{
font-size: 16px;
}
}
and I want every time hover over .photo-of-the-day something happen with title, that's pretty common so usually in css:
.photo-of-the-day:hover .photo-of-the-day--title{
font-size:12px
}
the thing is using BEM this is the only way I found and looks kinda ugly
.photo-of-the-day{
&--title{
font-size: 16px;
}
&:hover{
background: red;
/* this is ugly */
.photo-of-the-day--title{
text-decoration: underline;
}
}
}
so I was wondering if I can inherit .photo-of-the-day selector and use it inside the hover to avoid copy again the full selector.
Ideally would be something like:
.photo-of-the-day{
&--title{
font-size: 16px;
}
&:hover{
background: red;
&&--title{
text-decoration: underline;
}
}
}
Or something close to comeback to the parent selector for BEM. Is it possible?
If you insist on nesting everything, the best you can do is this:
.photo-of-the-day {
$root: &;
&--title{
font-size: 16px;
}
&:hover{
#{$root}--title {
text-decoration: underline;
}
}
}
You can use this syntax:
.photo-of-the-day {
&--title {
font-size: 16px;
}
&:hover &--title {
text-decoration: underline;
}
}
I have the following class which I use in multiple places like labels etc
.cont-label.ope-label {
font-weight: normal;
text-align: left;
font-family: ariel;
font-size: 18px;
}
now for header I want to add just
color for specific class ,there is a way not to do it like that ?
.cont-label.ope-label-new {
font-weight: normal;
text-align: left;
font-family: ariel;
font-size: 18px;
color:red;
}
you could just give the header a class of the colour you want and overwrite that:
<h1 class="cont-label ope-label red">test</h1>
then css:
.red {color:red;}
if your original header has a colour set then specificity will come into it:
.cont-label.ope-label.red {color:red;}
If you mean <header> element, use just
header .cont-label.ope-label {color: red;}
If header should be only class/id, use the similar
.header .cont-label.ope-label {color: red;}
/* or for ID */
#header .cont-label.ope-label {color: red;}
Try like this:
HTML:
<header>
<div class="cont-label ope-label">
...
</div>
</header>
CSS:
.cont-label.ope-label,header.cont-label.ope-label {
font-weight: normal;
text-align: left;
font-family: arial;
font-size: 18px;
}
.cont-label.ope-label {
color:blue;
}
header.cont-label.ope-label {
color:red;
}
You just need to create an css hierarchy like
.header .cont-label.ope-label{
color: red;
}
How can I add CSS comments in LESS nested rules? Ex:
div{
span{
font-size: 16px;
color: #fff;
}
/*This is my comment*/
em{
color: blue;
}
}
This is the output I expect to get:
div span {
font-size: 16px;
color: #fff;
}
/*This is my comment*/
div em {
color: blue;
}
But, unfortunatelly this is how it is processed:
div {
/*This is my comment*/
}
div span {
font-size: 16px;
color: #fff;
}
div em {
color: blue;
}
Is it possible to make this?
This isn't possible using /* */.
The reason being that it is still under the div scope, so it won't work using /* */ comments.
However, in LESS you can use // for single line comments which doesn't go through the compiler (so doesn't end up in the compiled CSS code but will be in the LESS code).
Here is the official documentation on comments.
Well, you can get your comment inside nested rules:
div {
em {
/* This is my comment */
color: blue;
}
}
output:
div em {
/* This is my comment */
color: blue;
}
I hope this would be useful for you.
/*This is my comment*/
div {
em {
color: blue;
}
span {
font-size: 16px;
color: #fff;
}
}
and the output will be,
/*This is my comment*/
div em {
color: blue;
}
div span {
font-size: 16px;
color: #fff;
}
More or less it would be like what you are expecting !!!
I have the following CSS that is being inherited (the original CSS):
h1 {
font-size:30px;
line-height:36px;
}
h1 small {
font-size:18px;
}
I have a class whereby i want to override the h1 property like so:
.logo h1 {
font-family: "Euphemia UCAS";
font-size: 200px !important;
font-weight: normal;
color: #222222;
}
How can I do this without modifying the original CSS? The !important value did not help.
link: https://dl.dropbox.com/u/3417415/Storify/mockups/screen1.html
You are applying your CSS selector incorrectly.
Your .logo class is ON the header tag itself, from what I can see in your code.
Your CSS should instead be:
h1.logo {
font-family: "Euphemia UCAS";
font-size: 200px !important;
font-weight: normal;
color: #222222;
}
Just double check where this class is exactly being applied.
Also, just checked your HTML again and it looks like this:
<h3 class="logo">Storify</h3>
So your CSS should really be:
h3.logo {
font-family: "Euphemia UCAS";
font-size: 200px !important;
font-weight: normal;
color: #222222;
}
Or am I misunderstanding you at all?
You can use a script element in your html.
Within the script Add an event handler via
addEventListener('load', function () {
// Change your css properties here.
});
This way you are sure no inheritance of css styles can occur.
I want to create unique styles for my links in a single particular div (So for example I want all links bold and red in the main body, but in the sidebardiv I want them blue and italic)
How do I go about it?
I have:
a:link{
color:#666666;
}
a:visited{
color:#003300;
}
a:hover{
color:#006600;
}
a:active{
color:#006600;
}
however if I put that in the sidebar div section it messes up my }'s
Use descendant selectors:
#sidebar a:link{ color:#134896; }
#sidebar a:visited{ color:#330033; }
#sidebar a:hover{ color:#942A5F; }
#sidebar a:active{ color:#6FB25C}
This is a fundamental css selector type, and you can chain as many descendant selectors as you wish, i.e.:
#content .navigation .header h1.red {
/* Properties */
}
This would match any <h1 class="red"> that is a descendant of an element with class header, that is a descendant of an element with class navigation that is an descendant of the element with id content.
Descendant selectors is one of the few selector types that actually works across browsers, so you can rely on them. It should be noted that you should have as few selectors as possible to achieve your targetting, as this will be a performance boost. Also, try not to specify the element type if you can avoid it (this is contradictory to the advice for JavaScript selectors), since it will tie your css to how the html looks now. A developer can decide to change a <span class="highlight"> to an <em class="highlight"> later, which would break a span.highlight-selector, while a .highlight-selector would continue to work.
a:link { font-weight: bold; color: #F00 }
#sidebar a { color: #00F; font-style: italic;}
#sidebar a:visited { color: #003300; }
#sidebar a:hover { color: #006600 }
#sidebar a:active { color: #006600 }
#divId a:link{ color:#666666; }
div#div_id a:link {style}
Repeat this as many times as you like for each div, and :visited, :active, :hover states.
a { font-weight: bold; color: red; }
#sidebardiv a { color: blue; font-weight: normal; font-style: italic; }