Understanding and Applying Recursion in CSS

According to WikipediaRecursion occurs when a thing is defined in terms of itself or of its type.” This is the same effect you have when shooting a screen with the camera broadcasting on that same screen, or if you put two mirrors in front of each other.

recursion in css

In web development, we call recursive a function that calls itself, and it is one of the best ways to do without loops.

 

Understanding recursion in CSS

Unfortunately, recursion is not something that can be applied in the CSS, but it is possible to reproduce an effect halfway between computer recursion and recursion.

How? By inserting identical objects into each other.

Let us take the following pen as an example. Look closely at the CSS code. we are talking here about fifteen lines of very simple codes, and everything will seem much clearer to you after having looked at them.
As you can see, we have 4 .item objects, inserting into each other, smaller and smaller. This effect was obtained by very simple recursion process.

See the Pen CSS Recursion 1/2 by WBD (@webuilddesign) on CodePen.


As you can see, the only absolute sizes are lines 14 and 15 of the CSS and apply only to the first object (because of the >, which take into account only the direct children of an object). All other objects have a relatively defined size: 50% of their parent. Our first one is therefore 200pixels, the following 100px, then 50px and 25px.  And this occurred without us having to define them by hand. Recursion!

If size is an “obvious” property for recursion, there are much more to it! Consider the transformation property “rotate” as an example. Click on our small collection of squares, and watch them rotate!

See the Pen CSS Recursion 2/2 by WBD (@webuilddesign) on CodePen.


As for the size, the first undergoes a rotation of 22.5 degrees. The 2nd is also rotated by 22.5 degrees, but in addition rotates its parent, which makes it turned 45 degrees in total! The same applies to the last two-quarters, for a final rotation of 90 degrees.

 

Let us add a bit of animation in the equation

For our third example, I left talking about my artistic fiber and preferred to insert a bit of color into the equation with the filter property.

See the Pen Recursion: Animation by WBD (@webuilddesign) on CodePen.


Note: Not everybody knows about the filter property? But this property allows you to reproduce some of the effects that you can apply to your images in Photoshop directly from the CSS. To learn more, I suggest you read the MND page dedicated to filter and try this little demonstration.

As you can see, this code is not much more complicated than the previous one, we are still here in the face of squares in squares. The size and rotation by recursion no longer have any secrets for you, and the filter works exactly the same way. The only big factor here is the animation.

Adding an animation did not really add complexity. The only difficulty is to keep in mind that each change you made will be applied more and more strongly as one sinks into the hierarchy of HTML.

 

The magic of inherit property

Finally, I would like to draw your attention to a particularly interesting value of the CSS: inherit.

This value tells a property to take the value of that property on its parent, which suits us well for working with recursion! As an example, I suggest you take the next pen.

See the Pen Recursive CSS by WBD (@webuilddesign) on CodePen.


We find the habits of the previous pens for most points, with the presence of line 37 and 38 of “inherit”, which means that the transform and opacity values are taken from the parent element.

What is beautiful with this small modification is that if it is possible to dynamically modify the value of an element, this modification will apply to all its parents! I’ll let you try the little sliders to convince you. Also note that the cursors apply to the highlighted object, and you can select another one by clicking.

 

In conclusion

Although recursion is still something very experimental, it is a technique that can save you lots of lines when creating your CSS illustrations and animations. So I encourage you to take some time to experiment with this concept and to take advantage of its power and to try to create animations as natural and interesting as possible!

WBD Team

Our excellent WBD team working day and night to put together best content for you.

You may also like...