CSS inheritance, or something like that - css

This is probably silly question, but here it goes.
I have 3 ID in my css file, and they all have some same code. For example:
#ID1 {
// some code
width: 300px;
height: 300px;
}
#ID2 {
// some code
width: 300px;
height: 300px;
}
#ID3 {
// some code
width: 300px;
height: 300px;
}
MY question is: is is possible to make some class or ID in CSS and call it inside another CSS class or ID. For example:
#setting {
width: 300px;
height: 300px;
}
#ID1 {
.setting
// some code
}
#ID2 {
.setting
// some code
}
#ID3 {
.setting
// some code
}
Thanks.

What you are looking for is called LESS. Read about it here

You can override css by applying reference to its parent class, check below example :
#setting {
width: 300px;
height: 300px;
}
#ID1 .setting {
// some code
}
#ID2 .setting {
// some code
}
#ID3 .setting {
// some code
}
above code will apply all the "setting" class tag inside ID1, ID2, ID3 respectively.
If your "setting" child is immediate class then you can you below as example :
#setting {
width: 300px;
height: 300px;
}
#ID1 > .setting {
// some code
}
#ID2 > .setting {
// some code
}
#ID3 > .setting {
// some code
}
Above code will only apply to its immediate child named with class "setting".

You can use multiple CSS classes on a single element.
You can create the "generic" classes and apply them to the elements.
For example:
<div class="class1 class2">some content</div>
Remember that if there is a common property in class1 and class2, the value of that property in class2 will overwrite the one in class1 on that element and ultimately the element will have the value defined in class2.
Really old browsers don't support this but most probably you shouldn't worry about them.

No, it is not possible in CSS, and it has nothing to do with inheritance. In CSS rules, you put all the selectors before the “{” and only declarations (property : value) between “{” and “}”.
But you can use both an id attribute and a class attribute on an element, as in
<div id="ID1" class="setting">...</div>
and then if you have e.g.
.setting {
width: 300px;
height: 300px;
}
(note: . not #), these declarations are applied to all elements with class=setting, along with any other declarations that may apply due to other CSS rules.

Related

LESS CSS prepend mixin reference with child selector

Is there any way I can use the immediate child selector without having to do it inside the mixin to get the desired result? The real mixin is actually large and I want to be able to reuse it also without having to pollute it with child selectors.
Desired Result
.wrapper > .col-xs-6 {
width: 50%;
}
Code I have
.wrapper {
> .mixintest(); //not allowed
}
.mixintest(){
.col-xs-6{
width: 50%;
}
}
move immediate child selector to mixin
.wrapper {
.mixintest();
}
.mixintest() {
> .col-xs-6 {
width: 50%;
}
}
That is the only way that will work according to
https://lesscss.org/features/#mixins-feature
more specifically this example in "Namespace" subsection
#outer > .inner(); // deprecated
#outer .inner(); // deprecated
#outer.inner(); // preferred

What does `&#my-id` mean in CSS or SASS?

I inherited some CSS code, which is making use of the & character prior to the id name to style it. It looks something like this:
&#my-id {
// Content and attributes
}
There are also other instances of it, such as:
&:before {
// content and attributes
}
and
&:hover {
// content and attributes
}
What do those mean? I can't find a good way to express this in a search, so I can't find anything. My apologies if this is a duplicate.
It refers to the parent selector.
Input:
.parent {
&.child {
color: red;
}
}
Output:
.parent.child { color: red }
It's really helpful if you're writing CSS in BEM format, something like:
.block {
&__element {
width: 100px;
height: 100px;
&--modifier {
width: 200px;
}
}
}
.block__element { width: 100px; height: 100px;}
.block__element--modifier { width: 200px;}
<div class="block__element"></div>
<div class="block__element block__element--modifier"></div>
And finally, all examples I've shared have been concatenating the class names, but you can also use it as a reference, like:
.parent {
& .child {
color: red;
}
}
.parent {
.child & {
color: blue;
}
}
.parent .child { color: red }
.child .parent { color: blue }
Additional references:
http://lesscss.org/features/#parent-selectors-feature
https://blog.slaks.net/2013-09-29/less-css-secrets-of-the-ampersand/
Using the ampersand (SASS parent selector) inside nested selectors
It's a built-in feature of Sass: https://css-tricks.com/the-sass-ampersand/
You can use it when you're nesting selectors and you need a more specific selector, like an element that has both of two classes:
If your CSS looks like this:
.some-class.another-class { }
And you wanted to nest, the Sass equivalent is:
.some-class {
&.another-class {}
}

LessCss generate css from parent class until nested caller

Lets start by giving an example,
Say for instance I have the class:
<html class="browser-ie"> ...
then on some element, I would like to call my mixin:
.browser-ie(#mixin){
html.browser-ie {
#mixin();
}
}
and be able to call it from for instance an element :
.main {
.nested {
.morenested {
.browser-ie({ min-height:100% });
}
}
}
and have it generate the following css:
html.browser-ie .main .nested .morenested { min-height:100%; }
Is there anything in the toolbox that would allow for such a thing?
I think that you are looking for the parent selector in your precompiler. This should output your desired CSS.
.main {
.nested {
.morenested {
html.browser-ie & {
min-height: 100%;
}
}
}
}
Keep in mind that the parent selector can fall anywhere in a declaration, and it will inherit all of the classes you have nested into up to that point, and append them to your string.
do you mean something like this?
.myColor{
min-height:100%;
}
.main{
.nested{
.morenested{
.myColor;
}
}
}
result:
/* Generated by less 2.4.0 */
.myColor {
min-height: 100%;
}
.main .nested .morenested {
min-height: 100%;
}

Apply same style to same type of element of different classes [duplicate]

div#id_div_allposts {
width: 100%;
}
div.class_div_post {
width: 100%;
}
div.class_div_editdelete {
width: 100%;
}
How can i write it in one line ?
And what's the way to select a html tag with id and class ?
All you have to do is separate them with a comma e.g
div#id_div_allposts,
div.class_div_post,
div.class_div_editdelete {
width:100%;
}
div#id_div_allposts, div.class_div_post, div.class_div_editdelete {
width: 100%;
}
You can group multiple selectors in CSS via a comma.
Note: The comma starts an entirely new selector from the very start.
Use the comma to separate multiple declarations
div#id_div_allposts, div.class_div_post, div.class_div_editdelete {
width: 100%;
}
Selecting an html tag with and id and class would be
div#ID.class
Try this:
div#id_div_allposts, div.class_div_post, div.class_div_editdelete {
width: 100%;
}
or assuming that you want all div to have width 100% then...
div{
width: 100%;
}

CSS:Defining Styles for input elements inside a div

I have a div called "divContainer" inside which i have few input elements like textboxes,radio buttons et..
How can i define the style for then in the CSS ? I wanna mention styles for elements inside this purticular div.not for the entire form.
Ex: For textboxes i need width as 150px;
For Radio buttons i need width of 20px;
You can define style rules which only apply to specific elements inside your div with id divContainer like this:
#divContainer input { ... }
#divContainer input[type="radio"] { ... }
#divContainer input[type="text"] { ... }
/* etc */
CSS 3
divContainer input[type="text"] {
width:150px;
}
CSS2
add a class "text" to the text inputs then in your css
.divContainer.text{
width:150px;
}
Like this.
.divContainer input[type="text"] {
width:150px;
}
.divContainer input[type="radio"] {
width:20px;
}
When you say "called" I'm going to assume you mean an ID tag.
To make it cross-brower, I wouldn't suggest using the CSS3 [], although it is an option. This being said, give each of your textboxes a class like "tb" and the radio button "rb".
Then:
#divContainer .tb { width: 150px }
#divContainer .rb { width: 20px }
This assumes you are using the same classes elsewhere, if not, this will suffice:
.tb { width: 150px }
.rb { width: 20px }
As #David mentioned, to access anything within the division itself:
#divContainer [element] { ... }
Where [element] is whatever HTML element you need.

Resources