CSS/SASS Use Siblings Height [duplicate] - css

This question already has answers here:
Sass - Manipulate inherited property?
(4 answers)
Closed 7 years ago.
Is there a way in SASS to get an element to inherit its siblings height so they line up on a horizontal line?
<div class="first">A bunch of content in here<div>
<div class="sibling"><div>
.first {
height: auto;
+ second {
height: use .first height;
}
}

Nope. Think about the way SASS works - your height: auto will be compiled into CSS as just that height: auto. There's no way for Sass to know what number that will turn out to be, so it can't assign a specific value to your second element. (It can only assign height: auto again, which may or may not be the value you want).

You can't make them the same height, but you can ensure that they all align within the row, which might accomplish the look you are going for (hard to be sure without knowing exactly what you are trying to do):
.aligned-row {
display:flex;
align-items:center;
}
This is newer CSS, so not completely backwards compatible:
More info on the display:flex can be found here: vertical-align with Bootstrap 3

Related

What's data-sizing in css selector here? [duplicate]

This question already has answers here:
Select elements by attribute in CSS
(6 answers)
Closed 1 year ago.
Here's the link to css code I am curious about : https://codepen.io/charlesxiao/pen/NWjgQQm.
Do you know what does the following css code means?
.awesome[data-sizing="intrinsic"] {
width: min-content;
}
What's this data-sizing attribute? I can't find it anywhere.
Thanks!
Much like how your selectors can target classes (.class) and ids (#id), your CSS can also target attributes, including data-*. It's common practice for javascript to target data-* attributes rather than going through the rigmarole of adding/removing classes. There's some particulars choosing between the two.
width: min-content; simply sets the element to the smallest possible size — the word "awesome" is the largest element and that's used as the width.

Automate CSS styles based on class name [duplicate]

This question already has answers here:
Can I programmatically determine a property value for a series of CSS classes?
(2 answers)
Closed 7 years ago.
I have many lines of CSS that essentially do the same thing over and over based on the class name:
.m45 {
height: 90px;
}
.m50 {
height: 100px;
}
.m55 {
height: 110px;
}
.m60 {
...
Is there any way to automate this so that a class that matches m followed by any number n gets the style height: calc(2px * n)?
No, CSS can't automate increases like this; it doesn't have support for functions like that. You can, however, use a CSS pre-processor like Sass to write shorter code that can handle things like a #for loop. Sass compiles into longer, normal CSS.

How to select the ID that's before another ID [duplicate]

This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 8 years ago.
I'm trying to do a CSS selection.
I want to select an ID that's before another ID selector.
This is the example:
<div id="wrapper">
<div class="aside_left">Left content...</div>
<div class="main_page">Main content...</div>
</div> <!-- end of wrapper -->
My objective is that the main_page stay on the left, and the aside_left change its position to the right.
Both the aside_left and the main_page have the property float:left I can't change the aside_left property to float:right because it is in many pages.
Is it possible to select the ID or CLASS that is before another ID?
My selector should be something like this: select the .aside_left that are before an .main_page
You cant do this with CSS selectors per se.. your best bet is to use something like jQuery's very accessible .parent() method.
You can see here for CSS3 and here for CSS2, this is not present in the current spec.
The speculative design for CSS4 does provide such a selector using a ! operator, but is not presently supported in any browser.
With this in mind, perhaps think about changing the logic behind what you're trying to do- can you not give the altered elements different class names to more easily identify them? Or progress down from your wrapper element?
Or, have a look into the nth-of-type selector, by using:
#wrapper .aside_left:nth-of-type(odd)
See THIS FIDDLE
This will select only the .aside_left elements which are the first child of the #wrapper element. The first child, as in the first in the DOM, as opposed to the first displayed (using float may visually produce results that dont reflect actual DOM positioning in which case you're back to using jQuery).
Only if HTML Structure Cooperates is Pure CSS Possible
I noted in my comment and ExtPro has noted in his answer that such is not possible by pure css, at least under most conditions. However, there is one set of conditions that it is possible. That is if there end up being more child elements of #wrapper in the html when something other than .main_page is present. This would be a very specifc case requirement, and may not match your situation (probably not based off your comment to ExtPro), but if so, then this code works:
#wrapper > .aside_left:nth-last-of-type(2) {
float: right;
}
See an example fiddle here. You see how this requires that there be two elements only in the case that the .main_page is there, and would demand more elements be present if .main_page is not there. So this technically does not key in on .main_page itself, but rather is using the html structure to change a preceding element based off the number of sibling elements present.
in pure CSS you could use display:flex and order , despite position in the flow of .main_page : (hover it to see them both switching sides).
/* using your HTML */
#wrapper {
display: flex;
flex-flow: row wrap;
height:200px;
width:80%;
margin:auto;
}
#wrapper > div {
width:20%;
box-shadow:inset 0 0 1px;
order:2;
}
#wrapper .main_page {
width:80%;
}
#wrapper > div.aside_left {
background:gray;
}
#wrapper > div.main_page:hover {
order:1;
}
live démo at http://codepen.io/gc-nomade/pen/Iywbj see some tips to use it here : http://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could as well reset direction on #wrapper if you style your 2 div as inl'ne-boxes and restore direction on the childs divs

Combine - display inline-block and none? [duplicate]

This question already has answers here:
How to fade to display: inline-block
(6 answers)
Closed 9 years ago.
div#errors_of_saved{
width: 100px;
display: inline-block;
display: none;}
There is error div, which is hidden until some JS function doesn't fade it in, and also it should be displayed inline.
The problem - this way text editor says that display property is overwritten, and display: inline-block none; - that syntax is invalid.
I don't want to use visibilty:hidden because Jquery animation fadeIn() fadeOut() doesn't work with visibility.
What can I do?
Because div#errors_of_saved is displayed on demand to show error messages, I would set the default to display: none.
jQuery tends to use display: block to show an element. Since you want to use display: inline-block, I might try setting a more specific CSS rule, for example:
div#errors_of_saved.show {
display: inline-block
}
and then have jQuery add the class as needed to show the error message.
My suggestion assumes that you might use the jQuery animate() function, but there are several approaches one could try.

CSS - screensize minus constant [duplicate]

This question already has answers here:
Is it possible to make a div 50px less than 100% in CSS3? [duplicate]
(6 answers)
Closed 10 years ago.
Is it possible somehow to calculate size of an element as a basic mathematical expression?
e.g.:
.wideColumn{max-width:100%-20em;} /*not working*/
This can be accomplished using LESS or jQuery. But unfortunately it cannot be done with pure CSS.
There are, however, workarounds to this issue using pure CSS. For example:
.wideColumn {
max-width: 100%;
margin-right: 10em;
margin-left: 10em;
}
Of course, this example may not work with your code. But there are numerous other workarounds.
Short answer is NO you cannot, not atleast in CSS 2, 2.1 spec, then too if you are interested you could take a look at Dynamic stylesheets with LESS
Or as Sandeep told, you can use calc() which is introduced in CSS3 spec
Reference
You cannot do this in CSS directly, but try something like LESS - http://lesscss.org/
it might be available one day, but not now - read more here http://www.w3.org/Style/CSS/specs#math

Resources