Ggtcf

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

0

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

share|improve this question

edited Mar 8 at 10:33

Takit Isy

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 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
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @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 | 

0

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

share|improve this question

edited Mar 8 at 10:33

Takit Isy

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 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
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @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

share|improve this question

edited Mar 8 at 10:33

Takit Isy

asked Mar 8 at 9:13

Takit IsyTakit Isy

6,31121032

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: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>

share|improve this question

edited Mar 8 at 10:33

Takit Isy

asked Mar 8 at 9:13

Takit IsyTakit Isy

6,31121032

share|improve this question

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

1 Answer
1

active

oldest

votes

0

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

share|improve this answer

edited Mar 8 at 11:35

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
);



);

draft saved

draft discarded

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

Name

Email

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

Name

Email

Required, but never shown

0

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

share|improve this answer

edited Mar 8 at 11:35

answered Mar 8 at 11:30

Frederik v.K.Frederik v.K.

1064

add a comment | 

0

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

share|improve this answer

edited Mar 8 at 11:35

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

share|improve this answer

edited Mar 8 at 11:35

answered Mar 8 at 11:30

Frederik v.K.Frederik v.K.

1064

share|improve this answer

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