Style specific letters in a word
Currently there is no way to target n-th letter
through CSS. There are some calls for CSS to allow n-th
everything in the future, but as of today, no such luck.
Currently, you would probably have to use some JS approach to solve this.
Styling individual letters in word
Remember, CSS is Cascading. You can style the whole #namer element separately from the first letter - the more specific style will override the more general one.
#namer:first-letter {
color:#09C;
font-size:1.1em;
font-weight:bold;
}
#namer {
color:red;
}
Update:
Lettering.js allows for styling individual letters. See the comments below for additional information. The info above is for styling the initial character only, and was in answer to the OP's original question before it was edited to make it clearer.
how to set a style for single words in a word document
You're trying to apply a paragraph style.
These styles can only be applied to complete paragraphs.
If you apply a character style, it will work fine.
Inline custom styles in Microsoft Word
Ok, I just found out:
Select text > Format > Style > New
Then select "Character" instead of "Paragraph" for the option "Style type".
Blending mode for individual letters within a word in CSS
Actually you need some help from JS to achieve your goal exactly.
Please check this
const element = document.getElementsByClassName("blend");
let text = element[0].getAttribute("data");
let blendMode = element[0].getAttribute("blend-mode");
for(let chr of text)
element[0].innerHTML += "<span style='mix-blend-mode: "+blendMode+"' >"+chr+"</span>";
.blend-style {
letter-spacing: -35px;
font-size:180px;
font-weight:bold;
color:rgba(22, 160, 133, 1);
font-family:arial
}
<p class="blend blend-style" blend-mode="difference" data="BlendMe!"></p>
Different colors for alternate letters in a word
If you can use jQuery, you could use this code snippet:
$( "span" ).each(function( index ) {
var originalText = $( this ).text();
var newText = "";
for( var i = 0; i < originalText.length; i++)
{
if (i % 2 === 0)
newText += "<span>" + originalText.charAt(i) + "</span>";
else
newText += originalText.charAt(i);
}
$( this ).html(newText);
});
It replaces the wanted characters with a span inside the original span, and you can then style that span.
Fiddle: http://jsfiddle.net/m6RTW/
Related Topics
How to Make CSS Sourcemapping Work in Chrome with Compass (Sass)
How to Change Image a When Hovering Over Image B Without JavaScript Only CSS
How to Put Text Inside Radio Button
Forcing a Column to Be Empty in a Responsive Grid Layout
Css3 Odd and Even Only Visible Rows
Image Popup on Hover in Dt in R
MVC Cannot Display Image Using Background-Url in CSS - Uses Bundling
Web-Kit and Sub-Pixel Values, Workaround
Media Query for High Resolution Mobile 1080Px (Xperia Z etc)
::Before with Input in Firefox
How to Disable Anti-Aliasing in CSS When Using @Font-Face with Pixel Fonts
CSS Rgba Transparency Bug in Chrome
How to Target the Very Last List Element in CSS