There is a sentence in a span or div tag.

<span>Есть предложение в теге span или div.</span>

Is it possible with Stylus or CSS to set the style for an individual word, like span:nth-child(3) :

 span:nth-child(3) position relative top -4px

CSS version for those who don't know stylus ...

 span:nth-child(3) { position: relative; top: -4px; }

Perhaps, somehow set display: table-cell; and for table-cell to set your own style? Maybe word-spacing is special ...?

  • @ Alexey Shimansky Thank you)) - CodeGust

1 answer 1

Can be used:

:: nth-word ()

:: first-word

:: last-word

:: nth-last-word ()

UPDATE:

Sorry - these tags do not work. It turns out that these were just suggestions for inclusion in a future version of css.

Only javascript remains.

 <body> <span class="ladder">Есть предложение в теге span или div.</span> <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"> </script> <script> jQuery(document).ready(function($) { var words = $('.ladder').text().split(" "); $('.ladder').empty(); var top = 0; $.each(words, function (i, v) { var word = $('<span>').text(v + ' ').css('position', 'relative').css('top', '-' + top + 'px'); $('.ladder').append(word); top += 2; }); }); </script> </body>

Working page on my test site.

  • ::nth-word() ! ?? Thanks, but is it permissible in pure CSS? Or is this some kind of js library connected? - CodeGust
  • Corrected the answer. Made a working javascript example. - KAGG Design
  • Thank you! The method is good, but it is important for me to make css, or at least attach js as a library, to make changes in the css itself. - CodeGust
  • It seems to me that there is no way to do this on css. - KAGG Design