Now, this is a new one ... I have a class declaration in SCSS:
.video {
a {
// some stuff
}
}
There are the classes: wrap - container - row - content and then some html:
<div class="btn-large">
View more
</div>
This 'a' has the styles from '.video a' applied, but in the whole source, there's no mention of 'video'. I checked the compiled css and it's '.video a'. The rule also shows up as applied in Safari (and Chrome, and Firefox). How's that possible?
There is no way for the styles to be applied if the selector doesn't match.
You have ruled out the class appearing in the source.
Therefore, it is being added to some element using JavaScript.
Related
I have a big list of dynamically added components and all of them are getting styling from the css class except the first one. It's specifically a darkmode or litemode class that gets added depending on the if this.state.dark === true or not
here's the function that renders them
renderComponent(info) {
return <Info isDark={this.isDark()} isHidden={this.state.hide === true} user={info} key={info} />
}
and this is what calls that function
{info.map(this.renderComponent)}
css class that's not rendering on first component
.darkmode + .other-class {
background-color: rgb(131, 21, 21);
}
I've tried conditionally rendering the page into a separate version with just darkmode and using the classes directly everywhere(ie there's no way they don't have the class).
In inspect element it says they have the class and even styling from a different area in the css is being applied. but the background stays transparent on just the first element.
I've also tried adding the class in the component itself and it's always the exact same result.
https://i.imgur.com/vLa8Tn9.png picture of the element not loading the css
https://i.imgur.com/cJxT5bU.png picture of element that is loading the css
I think this is a problem with your CSS selector.
The plus (+) sign select and style every element that is placed inmediately after the first element in your CSS selector.
In W3School you can see this behaviour
I think what you are trying to do is this:
.darkmode.Offline {
background-color: rgb(131, 21, 21);
}
What do the crossed style properties in Google Chrome devtools mean?
While inspecting an element using Chrome's devtools, in the elements
tab, the right-hand side 'Styles' bar shows the corresponding CSS
properties. At times, some of these properties are strike-throughed.
What do these properties mean?
Answer - https://stackoverflow.com/a/3047117/2232902
It means that the crossed-out style was applied, but then overridden
by a more specific selector, a more local rule, or by a later property
within the same rule.
Is there a way to prevent this behavior? ie- Stop the overriding of the property.
Note - I don't have control over the selectors.
Not really, that's how browsers render pages.
You can stick an important on your CSS:
.example {
color: red !important;
}
Or you can use Javascript to change the Style of an element after the page has loaded.
You can add !important before the semicolon in your CSS code.
.example-class {
width: 500px !important;
}
You can read up on it here
I have a problem here that i can't seem to figure out, till now my css has been a little slapdash and it was always a case of hack away till it looks right but i've decided to learn it properly and i'm trying to categorize things as much as i can.
So i have a layout that has an unordered list, this list has three li tags, within each of these li tags are two div each.
Now i have a class for each of these containers, they can be called container_1 container_2 and so on.
Now they have some unique attributes to each of them but they al also follow a set style for example, the divs in each li are side by side so its sets of two divs also they are all going to have round corners.
So i thought i could make a class class rounded_corners plus float_left and float_right so instead of re typing the code to round the corns or float something i could just reference thing class like this:
.container_1 .rounded_corners .float_left
{
}
.container_2 .rounded_corners .float_right
{
}
But when i use this i loose my styling so i used a comma and this allowed the sty;ing for the div to come back but the corners and floats didn't work.
So where am i going wrong with this?
This is my code, i have taken the code out that breaks the layout, but if you remove the comments you can see what happens.
http://jsfiddle.net/ragebunnykickass/g3Zaz/
The naming is a little different but you'll know what is meant.
Thanks.
CSS classes cannot inherit so what you have to do is split them to be as much atomic as possible. For example if you have a rounded-corners class and it may be applicable to containers:
.rounded-corners
{
/* Your CSS to define rounded corners */
}
Note that you define ONLY the properties for rounded corners. Now let's say you have a class to style containers (for example with a proper padding):
.container
{
/* Your CSS to define a nice container */
}
How to combine them together? This won't be done in CSS but in HTML, in this example this <div> inherits from both container and rounded-corners:
<div class="container rounded-corners">
</div>
Now suppose you need rounded corners for a non container object:
<div class="rounded-corners">
</div>
This is how CSS works. Do not compare them (because of name) with classes of object oriented languages. Each class define a set of attributes that will be applied to all elements that belong to that class. Final element style is the composition of the attributes inherited from each class that element belongs to.
NOTE: to summarize: answer is yes, you may have to repeat some code. You'll have trouble to manage your code (both HTML and CSS) if you use classes as short names for a style: you'll see you missed the point to separate content from style (because in HTML you'll define, using a class like rounded-corners, an explicit appearance). Imagine: next month you have to change your web-site style and fashion requirements impose you have square corners. You have to change your HTML code (unless you accept to have a rounded-corners class to apply a squared border). Much better if you simply say container and you let your CSS to define (and know) how a container should be rendered.
It may be applicable to you or not (it depends on your preferences, taste and development environment) but you may take a look to LESS. It's implemented as a JavaScript that will parse your CSSs. Of course you won't write a pure valid CSS but you'll gain many new features. In your case you may find mixins are what you need:
.rounded-corners
{
/* Your CSS here */
}
.float-left
{
/* Your CSS here */
}
.container
{
.rounder-corners
.float-left
}
You could have a CSS code like:
.container_1 {
}
.rounded_corners {
}
.float_left {
}
and then set a class to HTML element in this way:
<div class="container_1 rounded_corners float_left">...</div>
So the DIV element will inherit every style of every class!
Obviously, DIV it's just an example, you could use every tag!
If i get it well, you want a set of classes to apply to each div?
I'd break it up like that :
css
.rounded_corners {}
.float_left {}
.float_right {}
.container {}
and in the html
<li id="container_1" class="container float_left rounded_corners">...</li>
<li id="container_2" class="container float_right rounded_corners">...</li>
etc...
Note, this is different than the older question How can I apply CSS on all buttons which are present in that page? because this is an already existing style. So given that a style, which we'll call "standard_label_style" already exists in an included CSS file, what can I do to say that all the labels on this page should have that style short of adding:
class="standard_label_style"
to each and every one? And yes, I know I could apply the styles ex-post-facto with a snippet of jQuery or JavaScript code. I'm just trying to learn how I'm supposed to do it with CSS.
Follow Up
I've gotten several comments that say just use syntax like this .standard_label_style, label... Unfortunately that does nothing like what I want. That would allow me to apply additional rules to the standard_label_style class, as well as rules to labels within this page, but would not allow me to apply that style to all the labels on this page. To see an example of this, here is a stylesheet and html to demonstrate. The label without a class will still not appear in red but that's what I'm hoping to have happen. I want to apply an existing class to all those labels on the page, not just the one with the class and without adding new styling on this page, the existing style should be the only style.
included.css:
.standard_label_style { color: red; }
test.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="included.css">
<style>
.standard_label_style, label { }
</style>
</head>
<body>
<label class="standard_label_style">Test Label</label><br/>
<label>Unclassed Test Label</label>
</body>
</html>
CSS doesn't really work like that.
You can apply a style to all labels directly:
label {
color: Lime;
}
or apply a class to all labels
.labelClass {
color: Lime;
}
<label class="labelClass"></label>
You can also have multiple selectors, so you could ammend your current style to be
.labelClass, label {
color: Lime;
}
What you can't do in standard CSS is something like
label {
.labelClass;
}
The good news is that there are a bunch of server side libraries which make CSS suck less and let you do exactly this kind of thing, see for example dotLess if you're using .NET which provides nested rules and a basic inheratance model.
To apply a style to every label on the page, use this CSS:
label {
/* styles... */
}
If you have an existing style (e.g. "standard_label_style") in the CSS already, you can apply that to every label:
.standard_label_style, label {
/* styles... */
}
This will affect every label through the site, so use with caution!
In your css file, can't you just put
.standard_label_style, label
{
//styles
}
.standard_label_style, label {
/* stuff */
}
I'm not sure you can... one possible workaround (feels a bit hackish though) is to attach the style to your body tag, then change the css to be this:
body.standard_label_style label{
//Your styles here
}
One of the most underused CSS tricks of all time: Give your bodies an id or class!
HTML:
<body id="standard_label_style">
<label>Hey!</label>
</body>
CSS:
#standard_label_style label{
the styles
}
will take the styles, while
HTML:
<body id="custom_label_style">
<label>Custom!</label>
</body>
Will not.
You are dealing here with CSS precedence. Declarations which are "more vague" (body tag, classes) are applied before declarations which are "less vague" (specific elements, inline CSS).
Thus your answer depends on how the stylesheet is defining label styles. If for example it says label {...}, then that's fairly specific, and your best bet is to use a more specific CSS style, see:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ (good tutorial?)
CSS precedence
The level of "specificity" you need to override, as I said, depend on how specific your other stylesheet was. According to the link, "CSS embedded in the html always come after external stylesheets regardless of the order in the html".
There is also a chance that if you yourself define label {your custom css} that should work, if you import your stylesheet afterwards. It is what I would try first to see if it works. Have you tried this? What was the result?
Note that if you want to completely override the other stylesheet, you will need to also reset any CSS you are not using by settings its values to inherit or as appropriate.
I am creating a extension for Internet Explorer where I am injecting CSS-styled span tags on webpages. If a specific part of this component is clicked on, a popup is shown.
This popup is in reality a "DIV"-element that I am injecting at the very end of the content page:s "BODY"-tag. I have a CSS-styled table inside this div, and depending on which site I am on, the appearance of this popup is either according to specification (in regards to width, and so on), or not.
I don't have that much knowledge when it comes to CSS and such, but can this be because the "parent" page already has some CSS for "BODY", "DIV", or "TABLE"-elements that is being inherited by my elements?
If this is the case, is there any way of stopping this?
There are (at least) two means of doing this1, but they're both a little messy.
Use an iframe with its own css (this way the pages are separated by being two entirely different web-pages).
Use increased specificity to target the inserted html elements.
body {
/* targets the 'body', and these styles are inherited by its descendant elements */
}
body div {
/* targets all divs that are contained within the 'body' element */
}
body > div {
/* targets only divs that are directly contained within the body element */
/* and these styles will/may be inherited by the children of these divs */
}
The problem with this latter approach, is that you're having to explicitly specify almost all the possible permutations. And there will always be edge cases that aren't accounted for. You'd be best off using class-names to specify the styles for the new content:
.insertedDiv {
/* this will apply to all elements of class 'insertedDiv', but may be overridden */
/* by a more specific id-based selector such as '#container > .insertedDiv' */
But I can only think of these two at the moment.
CSS naturally "cascades", meaning if a container element has a property, it's children will by default inherit it. You can however, of course, override the value on the more specific items by redefining the style for them.
You'll need to inject CSS along with the HTML which specifies all the necessary properties for your popup. Unlike most CSS, you won't be able to assume any defaults, you'll need to specify for your div anything which might be overrode by the page. Make sure you refer to the div specifically by id in your CSS to ensure that your styles override that of the page, and that you don't inadvertently mess with the page's formatting.
You should start with a css reset stylesheet. But it has to be modified to only affect your html. So if you wrap your html in a div with a id like "23d4o829" you can use edit each rule in your reset style sheet so it only affects html that is within that div.
For example,
html, body { /* some stuff */ }
table { /* more stuff */ }
becomes
html #23d4o829, body #23d4o829 { /* some stuff */ }
#23d4o829 table { /* more stuff */ }
and so on. After that, you can have all the css rules you need to control your appearance.
EDIT: I think using iFrames as mentioned by David Thomas is better.