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.
Related
In very simple html/css, I have my menu in a <table id="menu">. The menu has no border, however I would like all the other tables in my blog to have borders.
I made it work this way:
#menu, #menu th, #menu td {border: none; color: red}
table, th, td {border: 1px solid black;}
However this is not very robust. If I add something else to tables I might forget to 'reset' it in #menu. Is there a way to force all properties in #menu so that I don't have to override one by one anything I would add to table, th, td {...}?
I tried the :not() selector but it doesn't feel robust either, I would rather specify what I want for menu on the #menu {...} line, not elsewhere. Let me know if that makes sense or I can reformulate
I think that I understand now. I was searching for a way to unset all values for a css class and came across this page: Reset/remove CSS styles for element only
It tells us that we can do something like this to achieve what you want:
#menu, #menu th, #menu td {
all: unset;
color: red;
}
table, th, td {
border: 1px solid black;
}
Notice how I added the all: unset; and removed the border: none;
This should reset all the styles for elements with that id, but make sure to put your other styles AFTER the all: unset, or else it will unset the styles you just wrote. Hope this helps!
Maybe using classes instead of id's.
If you use a class you can apply a css rule to all elements that have It
So for example to your table you can use
.custum-table
The prevoius class Will apply css styles to all elements
And finally if you wanna apply another css rule you can add another class to your element in this way
Another html file
.custom-table__no--effect
Previous class with BEM Will apply css styles to only one element for example table element
Is there a way to import the styling of a single CSS selector into another CSS selector and add to it or rewrite properties from it.
Let's say:
.original_class{
background:black;
color:white;
}
.overwrite{
#import(.original_class); /* I know this doesn't work */
color:blue;
border:1px solid green;
}
I can accomplish this by just redeclaring the .original_class and assigning new values (since CSS styles are rewritten from top to bottom), but this will replace the attributes of the original CSS class. What I want is to inherit its properties into another class without having to write them again (duplicate).
Not directly, no.
You could do something like this in your HTML:
<div class="original_class overwrite">...</div>
This will have the same effect, but you will have to do this for every element you want styled that way.
There is also the option of using a CSS pre-processor, like SASS, which supports inheritance/mixins.
You can add the .overwrite selector to the first rule by separating it from the existing selector with a comma (grouping selectors), so the selector rule becomes .original_class, .overwrite:
.original_class,
.overwrite {
background: black;
color: white;
}
.overwrite {
color: blue;
border: 1px solid green;
}
Also, when you write:
this will replace the attributes of the original CSS class
there is no such thing as attributes and class in CSS, not with the intended meaning of OOP I guess. There are rules, selector rules (to select HTML id, classes, elements, attributes and other pseudos), declarations, properties and values.
Unfortunately not. At least not without one of those fancy CSS plugin thingies that I wouldn't touch with a mile-long pole...
Of course, there's nothing stopping you having multiple classes on a single element.
I have a class named containner that has a lot of rules common to a lot of divs but I also want to get some specific details to those divs. I wonder if I can do something like this:
.containner {
common rules
}
.containner, #somedivid {
specific to some div rule
}
Cheers
To select an element inside your container, do this
.containner #somedivid{}
A comma will just style both elements individually, the CSS I posted can be used to be quite specific on a selector, using itself and however many parents it has.
.containner, #somedivid{color: red;}
is the same as
.containner{color: red;}
#somedivid{color: red;}
If you wanted all divs inside .containner to be 100x100px but one red and one blue, you can do something like this:
.containner *{border: 1px solid black;} /* Makes ALL elements inside .containner have a black border */
.containner div{width: 100px; height: 100px;} /* Makes all DIVS inside .containner 100x100px */
.containner div#somedivid{background-color: red;} /* Specific rules with a higher priority selector */
.containner #somedivid{background-color: blue;} /* Specific rules with a lower priority selector */
I have a css class rule:
.test{ text-align:center; font-family:Verdana; }
And i want to create another id rule (I hope It is right calling by "id rule" ):
#divNew1{ color: Red; }
#spanNew2{ color: Green; }
#pNew3{ color: Yellow; }
I have a lot of div elements. I want to pass .test class properties to other elements with only changing css file. That's why i don't want to add class attribute to div elements. The html code below:
<div id="divNew1">Ta ta taaaaa</div>
<span id="spanNew2">Ta ta taaaaa</span>
<p id="pNew3">Ta ta taaaaa</p>
But i want to add .test class properties to #divNew class by using inheritance and i don't want to add class attribute to the div like as above.
Is there any way to do this?
Just include the ID class on the upper declartion, the last declaration for any property wins. E.g. if the first rule had a color: Green;, .test would be green, #divNew would still be red.
.test, #divNew{ text-align:center; font-family:Verdana; }
#divNew{ color: Red; }
I believe the question is, can my "#divNew" CSS rule inherit the properties of the existing ".test" rule so that:
[Psuedo Code]
.test { color: red; }
#divNew : .test { border: 1px solid Black }
... results in an element with an id of #divNew getting both red text and a black border.
And the answer is no - there is no syntax for declaring the inheritance of one rule by another rule - but you can apply multiple CSS rules to one element.
In this example, the element would take the rules for "#divNew" and ".test" and ".another". It would override any conflicting properties with the last rule in your CSS.
<div id="#divNew" class="test another">...
LESS/dotLess allow you to perform additional processing within a CSS file on the server side, using a CSS style syntax. LESS. I'd link to dotLess, but I can't find a functioning link at present (http://www.dotlesscss.com/ is coming up empty for me)
edit
Or T4CSS from Phil Haack
What do you mean by inheritance? If in your HTML #divNew is a child of .test, then CSS properties of .test are already inherited by it (unless you override them by setting specific #divNew properties).
Syntax for adding properties directly to #divNew which is also .test:
#divNew.test {/*properties*/}
Syntax for adding properties to #divNew which is a child of .test:
.test #divNew {/*properties*/}
<div id="divNew" class="test">Ta ta taaaaa</div>
Not sure to understand you, but:
.test{ text-align:center; font-family:Verdana; }
#divNew.test{ color: Red; }
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>