This question already has answers here:
Is it possible to reference one CSS rule within another?
(6 answers)
Closed 8 years ago.
I am using Kendo UI with ASP MVC3 to build some forms. I am using the dropdown and datepicker widgets, which are styled larger that standard inputs. To ensure standard textboxes will match, Kendo has provided the .k-textbox class, which when assigned to a textbox, will style it to match the widgets.
I have created a template that does the job but is requiring a little extra coding to handle some conflicts, no biggie. However, I was wondering if there was a way to make an attribute selector (eg: input[type="text"]) inherit the style from another styled class. So could I make input[type=:text"] use the same styles as .k-textbox, without copying all the class data over?
You could add your selector to the existing one, separated by a comma:
.k-textbox, input[type="text"] {
/* classes already written by Kendo */
}
but then you won't be able to easily update this CSS when Kendo updates it.
Related
This question already has an answer here:
How to update styles of Angular Component dynamicaly
(1 answer)
Closed 2 years ago.
i am having a peculiar scenario in which i need to override the existing classes i defined in the angular component's scss file. Based on the scenario, i will get different styles from the api. Those styles will will have class name of that component with updated styles. I need to update that component and override the existing styling. I cannot use ngclass or ngstyle for this, as i will be getting an string of all the classes in the component with some updated styles. This will be unique for a component i.e each component should override the existing styles defined in its individual stylesheet. How do i override the entire individual style of an component.??
Thanks in Advance.
Two approaches:
1) Add .initial-styles class to component, take it off when your API call returns and apply your lazy styles.
2) Generate .css bundles in your service, Add .initial-styles class to component, all the right .css asset from your component and remove .initial-styles class
Explanation:
1) Here's a working demo for this first approach.
Add .initial-style rule that contains all other rules in your .scss
When you API returns execute:
this.renderer.removeClass(this.d.nativeElement, "initial-style"); to remove the styles. then apply your new styles via this.renderer.setStyle(this.d.nativeElement, styleProperty, styleValue);
Notice that if your .css API response is just a string like this:
container-style {color: 'red'} .header-style { color: 'yellow' }
then you'll need to do a a little bit of parsing. #Ram suggested this
https://github.com/angular/angular/issues/36911 proposal to ease the parsing.
2) Following the first approach add .initial-styles class, take it off when you call your .css asset, and then just add the name of the classes via this.renderer.addClass(this.d.nativeElement, "myclass");
This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
Closed 3 years ago.
So I have a CSS selector for a completely separate dialog in my application called "wizard-grid". This selector is nowhere in the HTML for this file, yet for some unknown reason the browser seems to be ignoring the parent selectors and inheriting from "select" for my dropdowns on this page. These files are minified, could that have something to do with it?
I even did a search in my entire project and the only place where the "wizard-grid" class is mentioned is in one CSS file and one HTML file that are not related to this page. I put a picture of what the broswer is interpreting below:
There are 3 separate selectors there, separated by comma. The "parent" selectors only apply to the input, not to the select or .search
.wizard-grid .wizard-body input
select
.search
I'm guessing what you probably want is this. You must have a mistake in your CSS somewhere.
.wizard-grid .wizard-body input
.wizard-grid .wizard-body select
.wizard-grid .wizard-body .search
This question already has answers here:
What's the difference between an id and a class?
(17 answers)
Closed 7 years ago.
<div id="stockexchange-id" class="stockexchange-class">Text</div>
In the example above I added both a class and an id into the div statement. Is there a difference between them? If I call .stockexchange-class CSS instead of #stockexchange-id CSS does it make any difference? If it doesn't then what it the point of having both of them? Also which one would be better to use?
The biggest difference is that a document can have multiple elements with the same class, but not with the same ID. An Identifier must be specific to a certain element within a document (i.e. full HTML page).
When applying CSS styling, some experts have recommended using classes over IDs to avoid specificity wars. CSS Lint (http://csslint.net/) recommends this.
The reason is that stylesheets are read from top to bottom, but IDs take precedence over class. This means that:
#stockexchange-id {
color: blue;
}
.stockexchange-class {
color: red;
}
Would color the text blue, even though red comes later. Here's a good graphic explaining specificity: https://stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg.
If everything has the same specificity, and most styles are applied via a single class, it makes the CSS easier to reason about, since it will read from top to bottom without extra styles being mixed in different orders. It also makes it easier to override classes, which can be useful.
Finally, if you style based on classes, you can re-use the styling on the same page by applying the class to another element on the page. With IDs, since they are unique, you cannot do this. Even if you think an element is unique on a page (e.g. a Buy Button), this may not always be the case. A designer may request the same element again later in the page.
You can only use an ID name once in any XHTML or HTML document. Duplicate ID tags will cause your page to fail validation, and can have negative effects when using JavaScript with them. Simply put, an ID is like the sticker that says "you are here" on a mall directory, and there can only ever be one of those.
Classes, like ID's, can also be used to in JavaScript scripts, but unlike ID's, they can be used multiple times in the same HTML document. This separation of content from presentation is what makes sites powered by CSS more robust, but some don't know the full extent to which they can use classes.
This question already has answers here:
What is the cascading module used for? Why it's called "cascade"?
(9 answers)
Closed 8 years ago.
I'm just wondering to know that about cascading. Is the css called cascading because this stores in cache?
What is the reason for css to say or name it cascading?
Cascading is when multiple items is row follow each other's in order
Have you ever heard about the Domino's cascading effect, in which when a piece fall it will cause the next piece fall till the end.
Css is named cascading because the effect is cascading according to where is your style
There are 3 locations where the style is located
Inline
Internal
External
So the styling is cascading in following order:
The html element will search for inline style and apply it, if there is no inline style then it will CASCADE to internal style and apply it, and if there is no internal style then it Will CASCADE to the external style and apply it
Got it?
This question already has answers here:
Why don't CSS resets use '*' to cover all elements?
(3 answers)
Closed 9 years ago.
*{
margin: 0;
padding: 0;
}
and
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,button,textarea,blockquote,th,td,p...{
margin:0;padding:0
}
the first is simple,and I like it.But why many big web sites use the second method
The universal selector (*) selects all elements on a page. This is great, but this selector would end up unnecessarily targeting elements which shouldn't realistically have no margin or padding by default.
Targeting specific elements is more logical as you wouldn't then have to override this CSS later on. For instance, if you wanted all instances of li elements within your document to have both margin and padding, you wouldn't want to include it within your list of selectors; equally you wouldn't want this to be targeted with * as it would add (albeit a very minuscule amount) to the time it takes for your page to render.
Nowadays a lot of websites actually make use of Normalize.css (direct link to stylesheet) to reset CSS:
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.
The first one does not clutter your debug tool (like Firebug) but the second one is more customizable as you can choose the elements that are not reset. Usually CSS reset files do not reset element like input, select or button and use the second form.
You should use SECOND ONE
because this is
Best one
logically correct
sometimes we need to use default properties of HTML elements.