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 am making a Chrome extension and need to know if can do the following.
I want to remove a specific CSS properties like (filter, opacity, etc). The property must remain in the CSS or HTML, example: style="filter:blur(3px)", but this not should have any effect.
Well, if I understand correctly, you can use jQuery's .css() method (link). Here is an example:
CSS:
.box {
background-color: red;
}
JS:
$('.box').css('background-color', 'none');
Lets say I have a plugin's CSS which loads later as my style.css
/*style.css*/
.something {
position:absolute;
left: 0px !important;
}
/*plugin's CSS*/
.something {
position:absolute;
left: -50px;
}
/now it has 0px but i want no left value at all/
i know i can set !important so that property wont be overriden, but is there any solution to turn "left" off as Chrome DevTools uncheck a property?
As far as I am aware (someone please feel free to correct me) there is no way to directly "turn off" a CSS property like in the Chrome DevTools.
The closest you can get it to reset the property to its default. In your example, it would be "left:auto;"
P.S. You may wish to adjust your tags to get more views and hopefully answers.
You should use the "auto" value for left:
.something
{
position:absolute;
left:auto !important;
}
"auto" will reset to the default (that is set by browsers for that style)
more info here: http://www.w3schools.com/cssref/pr_pos_left.asp
Specificity is the key to selecting the CSS attribute that you really want. Leverage the specific structure of the HTML in the plugin vs. non-plugin case so that specificity rules select the CSS you desire when plugin rules should apply.
There's a great overview of specificity here:
Source: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
One thought that comes to mind is to use an additional class, plugin, along with an appropriate selector.
If you are trying to override it then you can play with CSS Specificity Rules
Would it be possible to create a css class/id that would add a value(say, padding for example) to another class's same attrib value?
Let me try to put it down more clearly.
.someClass{
padding: 20px;
}
.thickenMe{
padding: 5px;
}
And when i apply these classes as follows,
<div class='someClass thickenMe'>
<!--planning to beef up this div-->
</div>
This div's net padding should become 25px.
Would it be possible using css only? Its just a thought!
This is not possible using pure CSS.
You could, however, write a CSS clause for each element that can be "thickened" like so:
.someClass{
padding: 20px;
}
.someClass.thickenMe{
padding: 25px;
}
Another alternative would be to use margin as well as padding, like so:
.someClass{
padding: 20px;
}
.thickenMe{
margin: 5px;
}
That might not be possible though, depending on your other CSS.
The easiest solution, although not pure CSS, would be to use JavaScript. Here is an example using JQuery:
var prevPad = $('.thickenMe').css('padding').replace("px", "");
prevPad = parseInt(prevPad);
$('.thickenMe').css('padding', prevPad + 5 + "px");
No. You need to use client-side scripting (i.e. JavaScript) if you want to change attributes dynamically. Or, if you just want to define styles by compiling from some dynamic sources, try LESS or SASS.
Unfortunately, no. You could get this sort of functionality by using a CSS-processor like LESS, which gives you variables, or you could handle it through client-side scripting (easiest with jQuery), but native CSS simply doesn't work that way. Classes override each other when they specify the same attribute; they don't supplement each other.
Is there any way to use conditional statements in CSS?
I'd say the closest thing to "IF" in CSS are media queries, such as those you can use for responsive design. With media queries, you're saying things like, "If the screen is between 440px and 660px wide, do this". Read more about media queries here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp, and here's an example of how they look:
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
That's pretty much the extent of "IF" within CSS, except to move over to SASS/SCSS (as mentioned above).
I think your best bet is to change your classes / IDs within the scripting language, and then treat each of the class/ID options in your CSS. For instance, in PHP, it might be something like:
<?php
if( A > B ){
echo '<div class="option-a">';
}
else{
echo '<div class="option-b">';
}
?>
Then your CSS can be like
.option-a {
background-color:red;
}
.option-b {
background-color:blue;
}
No. But can you give an example what you have in mind? What condition do you want to check?
Maybe Sass or Compass are interesting for you.
Quote from Sass:
Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.
CSS itself doesn't have conditional statements, but here's a hack involving custom properties (a.k.a. "css variables").
In this trivial example, you want to apply a padding based on a certain condition—like an "if" statement.
:root { --is-big: 0; }
.is-big { --is-big: 1; }
.block {
padding: calc(
4rem * var(--is-big) +
1rem * (1 - var(--is-big))
);
}
So any .block that's an .is-big or that's a descendant of one will have a padding of 4rem, while all other blocks will only have 1rem. Now I call this a "trivial" example because it can be done without the hack.
.block {
padding: 1rem;
}
.is-big .block,
.block.is-big {
padding: 4rem;
}
But I will leave its applications to your imagination.
The #supports rule (92% browser support July 2017) rule can be used for conditional logic on css properties:
#supports (display: -webkit-box) {
.for_older_webkit_browser { display: -webkit-box }
}
#supports not (display: -webkit-box) {
.newer_browsers { display: flex }
}
The only conditions available in CSS are selectors and #media. Some browsers support some of the CSS 3 selectors and media queries.
You can modify an element with JavaScript to change if it matches a selector or not (e.g. by adding a new class).
I would argue that you can use if statements in CSS. Although they aren't worded as such. In the example below, I've said that if the check-box is checked I want the background changed to white. If you want to see a working example check out www.armstrongdes.com. I built this for a client. Re size your window so that the mobile navigation takes over and click the nav button. All CSS. I think it's safe to say this concept could be used for many things.
#sidebartoggler:checked + .page-wrap .hamb {
background: #fff;
}
// example set as if statement sudo code.
if (sidebaretoggler is checked == true) {
set the background color of .hamb to white;
}
CSS has become a very powerful tool over the years and it has hacks for a lot of things javaScript can do
There is a hack in CSS for using conditional statements/logic.
It involves using the symbol '~'
Let me further illustrate with an example.
Let's say you want a background to slide into the page when a button is clicked. All you need to do is use a radio checkbox.
Style the label for the radio underneath the button so that when the button is pressed the checkbox is also pressed.
Then you use the code below
.checkbox:checked ~ .background{
opacity:1
width: 100%
}
This code simply states IF the checkbox is CHECKED then open up the background ELSE leave it as it is.
css files do not support conditional statements.
If you want something to look one of two ways, depending on some condition, give it a suitable class using your server side scripting language or javascript. eg
<div class="oh-yes"></div>
<div class="hell-no"></div>
There is no native IF/ELSE for CSS available. CSS preprocessors like SASS (and Compass) can help, but if you’re looking for more feature-specific if/else conditions you should give Modernizr a try. It does feature-detection and then adds classes to the HTML element to indicate which CSS3 & HTML5 features the browser supports and doesn’t support. You can then write very if/else-like CSS right in your CSS without any preprocessing, like this:
.geolocation #someElem {
/* only apply this if the browser supports Geolocation */
}
.no-geolocation #someElem {
/* only apply this if the browser DOES NOT support Geolocation */
}
Keep in mind that you should always progressively enhance, so rather than the above example (which illustrates the point better), you should write something more like this:
#someElem {
/* default styles, suitable for both Geolocation support and lack thereof */
}
.geolocation #someElem {
/* only properties as needed to overwrite the default styling */
}
Note that Modernizr does rely on JavaScript, so if JS is disabled you wouldn’t get anything. Hence the progressive enhancement approach of #someElem first, as a no-js foundation.
Changing your css file to a scss file would allow you to do the trick. An example in Angular would be to use an ngClass and your scss would look like:
.sidebar {
height: 100%;
width: 60px;
&.is-open {
width: 150px
}
}
While this feels like a bit of a hack, and may not work perfectly in all browsers, a method I have used recently combines the fact that CSS (at least in Chrome) seems to ignore invalid values set on properties, and we can set custom properties that fall back to their default value when invalid.
(Note: I haven't deeply tested this, so treat it as a hacky proof of concept/possible idea)
The following is written in SCSS, but it should work just as well in standard CSS:
.hero-image {
// CSS ignores invalid property values
// When this var is set to an image URL, the browser will ignore it
// When this var isn't set, then we will use the default fallback for the var, which is 'none'
display: var(--loading-page-background-image, none);
// This part isn't directly relevant to my 'if' example, but shows how I was actually using this custom property normally
background-image: var(--loading-page-background-image, none);
}
I'm setting the custom property from JavaScript / React, but it would likely work regardless of how you set it:
// 'true' case
const chosenLoaderUrl = "https://www.example.com/loader.png";
// 'false' case
//const chosenLoaderUrl = "";
// containerRef is just a reference to the div object, you could get this with
// jquery or however you need. Since I'm in React, I used useRef() and attached
// that to my div
containerRef.current.style.setProperty(
"--loading-page-background-image",
`url(${chosenLoaderUrl})`
);
When chosenLoaderUrl is set to my url, that url is an invalid value for the display property, so it seems to get ignored.
When chosenLoaderUrl is set to an empty value, it falls back to the default value in my var() statement, so sets display to none
I'm not sure how 'generalisable' this concept it, but figured I would add it to the other suggestions here in case it is useful to anyone.
Your stylesheet should be thought of as a static table of available variables that your html document can call on based on what you need to display. The logic should be in your javascript and html, use javascript to dynamically apply attributes based on conditions if you really need to. Stylesheets are not the place for logic.
You can use combination of jquery and css classes i.e. I want to change a font color of certain element depending on the color of the background:
CSS:
.h3DarkMode{
color: lightgray;
}
.h3LightMode{
color: gray;
}
HTML:
<h3 class="myText">My Text Here...</h3>
JQuery:
var toggleMode = localStorage.getItem("toggleMode");
if (toggleMode == "dark"){
$(".myText").removeClass("h3LightMode").addClass("h3DarkMode");
}else{
$(".myText").removeClass("h3DarkMode").addClass("h3LightMode");
}
No you can't do if in CSS, but you can choose which style sheet you will use
Here is an example :
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
will use only for IE 6 here is the website where it is from http://www.quirksmode.org/css/condcom.html , only IE has conditional comments. Other browser do not, although there are some properties you can use for Firefox starting with -moz or for safari starting with -webkit. You can use javascript to detect which browser you're using and use javascript if for whatever actions you want to perform but that is a bad idea, since it can be disabled.