How can I overwrite an entire CSS style for a class, id or other CSS selector?
For example:
If in styles1.css I have:
/* also, this file contains a lot of styles used on other pages */
.one-great-class {
background: white
...
/* a lot of properties */
}
... and in styles2.css (that is used only in one web page) I want to overwrite the class one-great-class completely what have I do to write?
.one-great-class {
/* Is possible that a line of code to delete all styles from this class? */
}
It's not possible in CSS at the moment.
But there may eventually be a property that does this: all
It can take three values:
initial | inherited | unset
Taken from the Cascading and Inheritance Module:
"For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade. "
According to the MDN documentation as of June 2017, all is currently supported by Chrome, Firefox/Mobile, and Opera. Safari supports only the CSS4 value revert, which is not supported by the other browsers.
.one-great-class {
border-radius: 50% 35% / 20% 25% 60%;
color: red;
font: 12px/14px Arial, serif;
height: 20em;
width: 20em;
/*... etc. */
}
.one-great-class {
all: initial;
}
Tested to work with IE9, Chrome and Opera. I had a problem with this when I wrote it, so decided that rather than changing existing rules, that I'd just append a new rule after the existing ones. From memory, the problem was with the default browser found in Android 2.3
Altering an existing rule seemed to be a better(cleaner) solution, though appending new rules ultimately proved to be chosen path. (I was changing background images by creating images with a canvas and then setting the background-image property. The images could be quite large, hence the preference for update)
Function
function replaceRuleAttrib(ruleSelector, attribText, newValue)
{
var nSheets, nRules, sheetNum, curSheet, curStyle, curAttrib;
var nSheets = document.styleSheets.length;
if (nSheets == 0)
document.head.appendChild(document.createElement('style'));
else
for (sheetNum = 0; sheetNum<nSheets; sheetNum++)
{
curSheet = document.styleSheets[sheetNum];
nRules = curSheet.cssRules.length;
for (ruleNum=0; ruleNum<nRules; ruleNum++)
{
curRule = curSheet.cssRules[ruleNum];
if (curRule.selectorText == ruleSelector)
{
for (styleI=0; styleI<curRule.style.length; styleI++)
{
styleName = curRule.style[styleI];
styleVal = curRule.style[styleName];
if (styleName == attribText)
{
curRule.style[styleName] = newValue;
return true;
}
}
}
}
}
document.styleSheets[0].insertRule( ruleSelector+'{' + attribText + ": " + newValue + "; }", 0);
}
Sample CSS (before)
<style>
h1
{
color: red;
}
</style>
Usage:
function onHeadingClick()
{
replaceRuleAttrib('h1', 'color', 'green');
}
Sample CSS (after)
<style>
h1
{
color: green;
}
</style>
Browser will apply css that come last.
.class {
font-size: 16px;
font-size: 14px;
}
The class will get font-size value 14px.
You can decleare a css as final.
.class {
font-size: 14px !important;
}
no genarel css rule can alter it.
Browser uses this method to give priority
inline < embeded < external < user-agent.
If you think you need more controll on css then use javascript to directly modfy dom.
Related
We are doing POC in which we ask client to add just the script tag in there website. The script tag refers to the javascript file in our website. When our script tag gets executed we inject the HTML code in the Parent website using the location of script tag.
The HTML code we injected, contains css classes which do not have any definition in our site and hence it gets the inherited css of basic HTML tags from the parent site.
The problem is how to check if parent site has classes implemented in there stylesheet file so that if there are no classes defined in parent site then we can add default definitions for our classes.
Example:
Let's say our injected HTML code snippet contains the following div.
<p>Property Details</p>
Lets say parent site has css definition for tag like below
p
{
font-size: 16px;
font-weight: bold;
}
And lets say we refered our own css file path, which also has the definition for like below
p
{
background-color: yellow;
}
(Note: stylesheet reference of parent site will always be above the stylesheet reference of our HTML code snippet.)
In above case style of should be with font size 16px and font weight bold, which is defined in parent site css file.
But in case, parent site css file does not have a definition for then style of should be background yellow, which is defined in our HTML code snippet.
You can try something like this (as suggested by Cray in the comments)
function isDefined(selector) {
for (var i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
for (var j = 0; j < sheet.cssRules.length; j++) {
return sheet.cssRules[j].selectorText == selector;
}
}
}
var styleElement = document.createElement("style");
styleElement.type = 'text/css';
document.head.appendChild(styleElement);
var myStylesheet = document.styleSheets[document.styleSheets.length - 1];
if (!isDefined("p")) {
myStylesheet.insertRule("p { background-color: yellow; }")
}
if (!isDefined("h1")) {
myStylesheet.insertRule("h1 { background-color: yellow; }")
}
p {
font-size: 12px;
}
<h1>hello</h1>
<p>world</p>
This is a simple example, but you'll need to expand it if you want to deal with cases in which the client defines a p.class-name or div p selector.
Note that since these selectors have higher precedence, the client could override your changes as a workaround.
I'm trying to select input elements of all types except radio and checkbox.
Many people have shown that you can put multiple arguments in :not, but using type doesn't seem to work anyway I try it.
form input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
Any ideas?
Why :not just use two :not:
input:not([type="radio"]):not([type="checkbox"])
Yes, it is intentional
If you're using SASS in your project, I've built this mixin to make it work the way we all want it to:
#mixin not($ignorList...) {
//if only a single value given
#if (length($ignorList) == 1){
//it is probably a list variable so set ignore list to the variable
$ignorList: nth($ignorList,1);
}
//set up an empty $notOutput variable
$notOutput: '';
//for each item in the list
#each $not in $ignorList {
//generate a :not([ignored_item]) segment for each item in the ignore list and put them back to back
$notOutput: $notOutput + ':not(#{$not})';
}
//output the full :not() rule including all ignored items
&#{$notOutput} {
#content;
}
}
it can be used in 2 ways:
Option 1: list the ignored items inline
input {
/*non-ignored styling goes here*/
#include not('[type="radio"]','[type="checkbox"]'){
/*ignored styling goes here*/
}
}
Option 2: list the ignored items in a variable first
$ignoredItems:
'[type="radio"]',
'[type="checkbox"]'
;
input {
/*non-ignored styling goes here*/
#include not($ignoredItems){
/*ignored styling goes here*/
}
}
Outputted CSS for either option
input {
/*non-ignored styling goes here*/
}
input:not([type="radio"]):not([type="checkbox"]) {
/*ignored styling goes here*/
}
Starting from CSS Selectors 4 using multiple arguments in the :not selector becomes possible (see here).
In CSS3, the :not selector only allows 1 selector as an argument. In level 4 selectors, it can take a selector list as an argument.
Example:
/* In this example, all p elements will be red, except for
the first child and the ones with the class special. */
p:not(:first-child, .special) {
color: red;
}
Unfortunately, browser support is somewhat new.
I was having some trouble with this, and the "X:not():not()" method wasn't working for me.
I ended up resorting to this strategy:
INPUT {
/* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
/* styles that reset previous styles */
}
It's not nearly as fun, but it worked for me when :not() was being pugnacious. It's not ideal, but it's solid.
If you install the "cssnext" Post CSS plugin, then you can safely start using the syntax that you want to use right now.
Using cssnext will turn this:
input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
Into this:
input:not([type="radio"]):not([type="checkbox"]) {
/* css here */
}
https://cssnext.github.io/features/#not-pseudo-class
This question already has answers here:
CSS3's attr() doesn't work in major browsers
(5 answers)
Closed 5 years ago.
width: attr(data-width);
I want to know if there's any way it's possible to set a css value using HTML5's data- attribute the same way that you can set css content. Currently it doesn't work.
HTML
<div data-width="600px"></div>
CSS
div { width: attr(data-width) }
There is, indeed, prevision for such feature, look http://www.w3.org/TR/css3-values/#attr-notation
This fiddle should work like what you need, but will not for now.
Unfortunately, it's still a draft, and isn't fully implemented on major browsers.
It does work for content on pseudo-elements, though.
You can create with javascript some css-rules, which you can later use in your styles: http://jsfiddle.net/ARTsinn/vKbda/
var addRule = (function (sheet) {
if(!sheet) return;
return function (selector, styles) {
if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
if (sheet.addRule) return sheet.addRule(selector, styles);
}
}(document.styleSheets[document.styleSheets.length - 1]));
var i = 101;
while (i--) {
addRule("[data-width='" + i + "%']", "width:" + i + "%");
}
This creates 100 pseudo-selectors like this:
[data-width='1%'] { width: 1%; }
[data-width='2%'] { width: 2%; }
[data-width='3%'] { width: 3%; }
...
[data-width='100%'] { width: 100%; }
Note: This is a bit offtopic, and not really what you (or someone) wants, but maybe helpful.
As of today, you can read some values from HTML5 data attributes in CSS3 declarations. In CaioToOn's fiddle the CSS code can use the data properties for setting the content.
Unfortunately it is not working for the width and height (tested in Google Chrome 35, Mozilla Firefox 30 & Internet Explorer 11).
But there is a CSS3 attr() Polyfill from Fabrice Weinberg which provides support for data-width and data-height. You can find the GitHub repo to it here: cssattr.js.
I am trying to put font family for a div if the variable is not equal to null.
my less code is
div.content {
& when (isstring(#contentFont)) {
font-family: #contentFont;
}
}
the output that I get from css is
div.content when (isstring(#contentFont)) {
font-family: Abel;
}
my problem is, the style is not applying for the div.content, not sure what i am doing wrong. Any help would be greatly appreciated.
As discussed in the comments, you're using version 0.4.0 of lessphp – which doesn't seem to support the shorthand guard (when) syntax that you're trying to use.
It looks like it does support guards on mixins, however.
Try splitting your code into a mixin and a usage of this mixin, like this:
/* the mixin */
.fontIfString(#font) when (isstring(#font)) {
font-family: #font;
}
/* usage */
#contentFont: "hello";
div.content {
.fontIfString(#contentFont);
}
Google visualization API's include 'Formatters' which allow you to use things like colored text and arrows representing qualities of data. More information on formatters can be found here.
Now, when I edit the CSS values of the table, or use configurtion options (found here), tables that use fomatters seem to have trouble displaying certain CSS properties i.e, width of cells and text size. An example I've noticed where this is the case when the entire tables text is a smaller than default font, and a row is selected. That row which was selected will revert back to a 10pt Arial font when deselected.
Although this specific instance is annoying, I am curious about ALL formatter css properties and their class names. There is no information, to my knowledge, on the Google developer site.
These are my class names:
'headerRow': 'header-cells',
'tableRow': '.even-background all-cells',
'oddTableRow': 'odd-background all-cells',
'selectedTableRow': 'all-cells',
'hoverevenTableRow': '',
'hoveroddrTableRow': '',
'headerCell': 'header-cells white bold darkgreen-background',
'tableCell': 'all-cells'
};
These are the formatters being used.
var changecolor = new google.visualization.ColorFormat();
changecolor.addRange(null, 0, 'red', 'none');
changecolor.addRange(0.000001, null, 'green', 'none');
changecolor.format(dt, 1); // Apply formatter to second column
var parens = new google.visualization.NumberFormat({
prefix: "$",
negativeParens: true
});
parens.format(dt, 1); // Apply formatter to second column
var arrow = new google.visualization.ArrowFormat();
arrow.format(dt, 1); // Apply formatter to second column
var FormatAll = new google.visualization.NumberFormat({
prefix: "$",
pattern: '#.00##'
});
Style properties:
<style>
.all-cells {
border: 0px;
border-collapse: collapse;
font-size: 9px;
padding-right: 0;
}
.header-cells {
border: 0px;
border-collapse: collapse;
font-size: 9px;
padding-right: 0;
color: white;
font-weight: bold;
}
.darkgreen-background {
background-color: #0B3B0B;
}
.odd-background {
background-color: #E6F8E0;
}
.even-background {
background-color: #FFF5E3;
}
.bold {
font-weight: bold
}
.White {
fontcolor: white;
}
</style>
JS fiddle script in action
If you notice, when a cell is selected, the font size changes. This only happens when the google.visualization.ArrowFormat is applied.
I'd like to get rid of the boarder of the table, but that is not affected by classname or class properties (refer to the fiddle),
There is also a conflict with the parens.format and google.visualization.NumberFormat. Decimals places do not display with parentheses.
Not directly shown in code or fiddle: cell width properties become offset with cells that have formatters applied to them.
There are a couple things going on here. First, the ArrowFormat overrides all other classes placed on a cell, so those cells do not have the all-cells class. This is fine, as long as the <tr> has the all-cells class. The <tr>'s lose the all-cells class when you deselect them, because all-cells is part of both the even/odd row and selected row classes (and deselecting a row removes whatever classes you put on it.
If the reason you put all-cells as the selected row class is because you don't want the style from the default class, I suggest changing the class to something that has no styles associated with it, like this:
'selectedTableRow': 'noStyle'
Also, on a side note, you have a typo in the even row classes: there should not be a . before even-background:
'tableRow': 'even-background all-cells'
see it working here: http://jsfiddle.net/asgallant/1q8yk4f5/3/