Stylize sibling elements with additive transformsStylize element according to its index numberHow do you keep parents of floated elements from collapsing?Retrieve the position (X,Y) of an HTML elementCreating a div element in jQueryHow to move an element into another element?Is there a “previous sibling” CSS selector?How do I combine a background-image and CSS3 gradient on the same element?Click through div to underlying elementsHow do I remove the space between inline-block elements?Changing the color of an hr elementCSS Transform with element resizing
Perfect riffle shuffles
Is exact Kanji stroke length important?
Should my PhD thesis be submitted under my legal name?
Meta programming: Declare a new struct on the fly
How do I repair my stair bannister?
How to check participants in at events?
Latex for-and in equation
Partial sums of primes
I2C signal and power over long range (10meter cable)
Is infinity mathematically observable?
Reply ‘no position’ while the job posting is still there (‘HiWi’ position in Germany)
Indicating multiple different modes of speech (fantasy language or telepathy)
Are taller landing gear bad for aircraft, particulary large airliners?
Is there an wasy way to program in Tikz something like the one in the image?
A workplace installs custom certificates on personal devices, can this be used to decrypt HTTPS traffic?
Bob has never been a M before
Identify a stage play about a VR experience in which participants are encouraged to simulate performing horrific activities
Adding empty element to declared container without declaring type of element
Can a Bard use an arcane focus?
Giant Toughroad SLR 2 for 200 miles in two days, will it make it?
How to interpret the phrase "t’en a fait voir à toi"?
word describing multiple paths to the same abstract outcome
How can I raise concerns with a new DM about XP splitting?
Did US corporations pay demonstrators in the German demonstrations against article 13?
Stylize sibling elements with additive transforms
Stylize element according to its index numberHow do you keep parents of floated elements from collapsing?Retrieve the position (X,Y) of an HTML elementCreating a div element in jQueryHow to move an element into another element?Is there a “previous sibling” CSS selector?How do I combine a background-image and CSS3 gradient on the same element?Click through div to underlying elementsHow do I remove the space between inline-block elements?Changing the color of an hr elementCSS Transform with element resizing
I've been trying to achieve the following without having to declare all the nth-of-type(x):
li:nth-of-type(2)
transform: scale(0.9);
li:nth-of-type(3)
transform: scale(0.81);
li:nth-of-type(4)
transform: scale(0.729);
li:nth-of-type(5)
transform: scale(0.6561);
<ul>
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
<li>LI 5</li>
</ul>This snippet should probably works if transform was set as an “additive property”:
li ~ li
transform: scale(0.9);
<ul>
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
<li>LI 5</li>
</ul>I know how it can be done by reordering the HTML (but elements won't be siblings anymore) or by using some JavaScript but…
Isn't there any trick that makes the above possible only with CSS ?
Thanks in advance.
html css css3
asked Mar 8 at 9:13
Takit IsyTakit Isy
6,31121032
add a comment |
I've been trying to achieve the following without having to declare all the nth-of-type(x):
li:nth-of-type(2)
transform: scale(0.9);
li:nth-of-type(3)
transform: scale(0.81);
li:nth-of-type(4)
transform: scale(0.729);
li:nth-of-type(5)
transform: scale(0.6561);
<ul>
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
<li>LI 5</li>
</ul>This snippet should probably works if transform was set as an “additive property”:
li ~ li
transform: scale(0.9);
<ul>
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
<li>LI 5</li>
</ul>I know how it can be done by reordering the HTML (but elements won't be siblings anymore) or by using some JavaScript but…
Isn't there any trick that makes the above possible only with CSS ?
Thanks in advance.
html css css3
asked Mar 8 at 9:13
Takit IsyTakit Isy
6,31121032
only transform is needed here, or it can be something generic?
– Temani Afif
Mar 8 at 9:28
Hey @TemaniAfif ! You're always there... :) In fact, I chosetransformbecause we can do a lot of things with it. And if it can be applied totransform, why not on another property?
– Takit Isy
Mar 8 at 9:33
with transform we may approximate what you want using a more generic transform combined with some perspective, etc (some hacks ..) as I don't think what you want is possible, the challenge is somehow the same as you previous question. There is no way to express values between sibling elements, only nested element may have some relation.
– Temani Afif
Mar 8 at 9:36
@TemaniAfif Yeah, maybe I'm trying to push the limits. :)
– Takit Isy
Mar 8 at 10:07
@TakitIsy is it allowed to use js or you want this to be only with css selectors, Am not sure if this can be solved with just plain css selectors
– satwik
Mar 8 at 10:32
add a comment |
I've been trying to achieve the following without having to declare all the nth-of-type(x):
li:nth-of-type(2)
transform: scale(0.9);
li:nth-of-type(3)
transform: scale(0.81);
li:nth-of-type(4)
transform: scale(0.729);
li:nth-of-type(5)
transform: scale(0.6561);
<ul>
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
<li>LI 5</li>
</ul>This snippet should probably works if transform was set as an “additive property”:
li ~ li
transform: scale(0.9);
<ul>
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
<li>LI 5</li>
</ul>I know how it can be done by reordering the HTML (but elements won't be siblings anymore) or by using some JavaScript but…
Isn't there any trick that makes the above possible only with CSS ?
Thanks in advance.
html css css3
asked Mar 8 at 9:13
Takit IsyTakit Isy
6,31121032
I've been trying to achieve the following without having to declare all the nth-of-type(x):
li:nth-of-type(2)
transform: scale(0.9);
li:nth-of-type(3)
transform: scale(0.81);
li:nth-of-type(4)
transform: scale(0.729);
li:nth-of-type(5)
transform: scale(0.6561);
<ul>
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
<li>LI 5</li>
</ul>This snippet should probably works if transform was set as an “additive property”:
li ~ li
transform: scale(0.9);
<ul>
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
<li>LI 5</li>
</ul>I know how it can be done by reordering the HTML (but elements won't be siblings anymore) or by using some JavaScript but…
Isn't there any trick that makes the above possible only with CSS ?
Thanks in advance.
li:nth-of-type(2)
transform: scale(0.9);
li:nth-of-type(3)
transform: scale(0.81);
li:nth-of-type(4)
transform: scale(0.729);
li:nth-of-type(5)
transform: scale(0.6561);
<ul>
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
<li>LI 5</li>
</ul>li:nth-of-type(2)
transform: scale(0.9);
li:nth-of-type(3)
transform: scale(0.81);
li:nth-of-type(4)
transform: scale(0.729);
li:nth-of-type(5)
transform: scale(0.6561);
<ul>
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
<li>LI 5</li>
</ul>li ~ li
transform: scale(0.9);
<ul>
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
<li>LI 5</li>
</ul>li ~ li
transform: scale(0.9);
<ul>
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
<li>LI 5</li>
</ul>html css css3
html css css3
asked Mar 8 at 9:13
Takit IsyTakit Isy
6,31121032
asked Mar 8 at 9:13
Takit IsyTakit Isy
6,31121032
edited Mar 8 at 10:33
Takit Isy
asked Mar 8 at 9:13
Takit IsyTakit Isy
6,31121032
asked Mar 8 at 9:13
Takit IsyTakit Isy
6,31121032
asked Mar 8 at 9:13
Takit IsyTakit Isy
6,31121032
6,31121032
only transform is needed here, or it can be something generic?
– Temani Afif
Mar 8 at 9:28
Hey @TemaniAfif ! You're always there... :) In fact, I chosetransformbecause we can do a lot of things with it. And if it can be applied totransform, why not on another property?
– Takit Isy
Mar 8 at 9:33
with transform we may approximate what you want using a more generic transform combined with some perspective, etc (some hacks ..) as I don't think what you want is possible, the challenge is somehow the same as you previous question. There is no way to express values between sibling elements, only nested element may have some relation.
– Temani Afif
Mar 8 at 9:36
@TemaniAfif Yeah, maybe I'm trying to push the limits. :)
– Takit Isy
Mar 8 at 10:07
@TakitIsy is it allowed to use js or you want this to be only with css selectors, Am not sure if this can be solved with just plain css selectors
– satwik
Mar 8 at 10:32
add a comment |
only transform is needed here, or it can be something generic?
– Temani Afif
Mar 8 at 9:28
Hey @TemaniAfif ! You're always there... :) In fact, I chosetransformbecause we can do a lot of things with it. And if it can be applied totransform, why not on another property?
– Takit Isy
Mar 8 at 9:33
with transform we may approximate what you want using a more generic transform combined with some perspective, etc (some hacks ..) as I don't think what you want is possible, the challenge is somehow the same as you previous question. There is no way to express values between sibling elements, only nested element may have some relation.
– Temani Afif
Mar 8 at 9:36
@TemaniAfif Yeah, maybe I'm trying to push the limits. :)
– Takit Isy
Mar 8 at 10:07
@TakitIsy is it allowed to use js or you want this to be only with css selectors, Am not sure if this can be solved with just plain css selectors
– satwik
Mar 8 at 10:32
only transform is needed here, or it can be something generic?
– Temani Afif
Mar 8 at 9:28
only transform is needed here, or it can be something generic?
– Temani Afif
Mar 8 at 9:28
Hey @TemaniAfif ! You're always there... :) In fact, I chose
transform because we can do a lot of things with it. And if it can be applied to transform, why not on another property?– Takit Isy
Mar 8 at 9:33
Hey @TemaniAfif ! You're always there... :) In fact, I chose
transform because we can do a lot of things with it. And if it can be applied to transform, why not on another property?– Takit Isy
Mar 8 at 9:33
with transform we may approximate what you want using a more generic transform combined with some perspective, etc (some hacks ..) as I don't think what you want is possible, the challenge is somehow the same as you previous question. There is no way to express values between sibling elements, only nested element may have some relation.
– Temani Afif
Mar 8 at 9:36
with transform we may approximate what you want using a more generic transform combined with some perspective, etc (some hacks ..) as I don't think what you want is possible, the challenge is somehow the same as you previous question. There is no way to express values between sibling elements, only nested element may have some relation.
– Temani Afif
Mar 8 at 9:36
@TemaniAfif Yeah, maybe I'm trying to push the limits. :)
– Takit Isy
Mar 8 at 10:07
@TemaniAfif Yeah, maybe I'm trying to push the limits. :)
– Takit Isy
Mar 8 at 10:07
@TakitIsy is it allowed to use js or you want this to be only with css selectors, Am not sure if this can be solved with just plain css selectors
– satwik
Mar 8 at 10:32
@TakitIsy is it allowed to use js or you want this to be only with css selectors, Am not sure if this can be solved with just plain css selectors
– satwik
Mar 8 at 10:32
add a comment |
1 Answer
1
active
oldest
votes
Unfortunately not. The only way i would know of is to give every li a class, but that would just shift the problem.
However there are loops in CSS Preprocessors like less or Sass, where you could iterate though the list and make the transform value smaller or bigger.
Less Loops
answered Mar 8 at 11:30
Frederik v.K.Frederik v.K.
1064
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55059964%2fstylize-sibling-elements-with-additive-transforms%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Unfortunately not. The only way i would know of is to give every li a class, but that would just shift the problem.
However there are loops in CSS Preprocessors like less or Sass, where you could iterate though the list and make the transform value smaller or bigger.
Less Loops
answered Mar 8 at 11:30
Frederik v.K.Frederik v.K.
1064
add a comment |
Unfortunately not. The only way i would know of is to give every li a class, but that would just shift the problem.
However there are loops in CSS Preprocessors like less or Sass, where you could iterate though the list and make the transform value smaller or bigger.
Less Loops
answered Mar 8 at 11:30
Frederik v.K.Frederik v.K.
1064
add a comment |
Unfortunately not. The only way i would know of is to give every li a class, but that would just shift the problem.
However there are loops in CSS Preprocessors like less or Sass, where you could iterate though the list and make the transform value smaller or bigger.
Less Loops
answered Mar 8 at 11:30
Frederik v.K.Frederik v.K.
1064
Unfortunately not. The only way i would know of is to give every li a class, but that would just shift the problem.
However there are loops in CSS Preprocessors like less or Sass, where you could iterate though the list and make the transform value smaller or bigger.
Less Loops
answered Mar 8 at 11:30
Frederik v.K.Frederik v.K.
1064
edited Mar 8 at 11:35
answered Mar 8 at 11:30
Frederik v.K.Frederik v.K.
1064
answered Mar 8 at 11:30
Frederik v.K.Frederik v.K.
1064
answered Mar 8 at 11:30
Frederik v.K.Frederik v.K.
1064
1064
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55059964%2fstylize-sibling-elements-with-additive-transforms%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
only transform is needed here, or it can be something generic?
– Temani Afif
Mar 8 at 9:28
Hey @TemaniAfif ! You're always there... :) In fact, I chose
transformbecause we can do a lot of things with it. And if it can be applied totransform, why not on another property?– Takit Isy
Mar 8 at 9:33
with transform we may approximate what you want using a more generic transform combined with some perspective, etc (some hacks ..) as I don't think what you want is possible, the challenge is somehow the same as you previous question. There is no way to express values between sibling elements, only nested element may have some relation.
– Temani Afif
Mar 8 at 9:36
@TemaniAfif Yeah, maybe I'm trying to push the limits. :)
– Takit Isy
Mar 8 at 10:07
@TakitIsy is it allowed to use js or you want this to be only with css selectors, Am not sure if this can be solved with just plain css selectors
– satwik
Mar 8 at 10:32