Databases
StackOverflow2013
Postsdbo
POIs it possible with CSS to target letters within a paragraph without span?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIs it possible with CSS to target letters within a paragraph without span?
    primarykey
    data
    text
    <p>I'm trying to add an effect to my letters, but I don't want to add a bunch of span tags all over the place. Is it possible to target a specific letter within a line of text with CSS?</p> <p>I know there is <code>:first-child, :first-of-type, :only-child, :last-child, :last-of-type, :only-of-type ,:nth-child, :nth-of-type ,:nth-last-child</code> and <code>:nth-last-of-type</code> I believe. But none of these help do what I want in any combination. </p> <p>This is what I need to target letter by letter. <code>&lt;p&gt;Hello.&lt;/p&gt;</code></p> <p>This is what I don't want. Nor <strong>lettering.js</strong>.</p> <pre><code>&lt;p&gt; &lt;span class"somefancyname"&gt;H&lt;/span&gt; &lt;span class"somefancyname"&gt;e&lt;/span&gt; &lt;span class"somefancyname"&gt;l&lt;/span&gt; &lt;span class"somefancyname"&gt;l&lt;/span&gt; &lt;span class"somefancyname"&gt;o&lt;/span&gt; &lt;span class"somefancyname"&gt;.&lt;/span&gt; &lt;/p&gt; </code></pre> <p>Lastly - Is it really <strong>bad</strong> to use that many <code>span</code> tags? I feel dirty if I use that many... not sure why really. Thanks in advanced! If someone can reword this to make sense - I feel I rambled a bit - thank you!</p> <p><strong>Note:</strong> I want to add different animations to the letters. Not just (1) place on the page - so that's why I'm concerned with multiple <code>span</code> tags. What animations? Some bouncing over here and some color changing over there and maybe some rotating over yonder. Is my only solution to use JS or just give in to the <code>span</code> tags?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USLloan Alas
    1. USLloan Alas
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POIs it possible with CSS to target letters within a paragraph without span?
      1. USLloan Alas
      1. VTFavorite
    1. COI don't think this is possible in pure CSS. If you don't want to use spans, you may need some Javascript/jQuery.
      singulars
      1. POIs it possible with CSS to target letters within a paragraph without span?
      1. USYuriy Galanter
    2. COHow about a good ol' fashioned image?
      singulars
      1. POIs it possible with CSS to target letters within a paragraph without span?
      1. USTom
    3. CO@Yuriy That's what I'm afraid of. It's something pretty simple I don't feel the need to use JS - I thought if I asked here, maybe a CSS ninja would help.
      singulars
      1. POIs it possible with CSS to target letters within a paragraph without span?
      1. USLloan Alas
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload