- This topic is empty.
-
AuthorPosts
-
December 25, 2012 at 10:47 am #41596ZoomParticipant
I know that this is highly unlikely, but is there a way to use just CSS to select part of text?
Say for example I have the code:
my-domain.comis there a way to style “-domain” separately without wrapping it in another tag and without using a script?
If there is no way to do it with just CSS, what is the best way to do it? Additional tag, js or something else?
December 25, 2012 at 11:41 am #118970ZoomParticipantYes, I currently have it working with a span, I just don’t like it very much that way due to semantic and SEO reasons. This is why I am considering using javascript if nothing better comes up.
December 25, 2012 at 12:16 pm #118972ZoomParticipant>Span tag got absolutely no influence on SEO if used with proper word spacing.
It is a domain so there shouldn’t be any word spacing. I don’t think it will actually affect SEO, but I prefer to be on the safe side when possible since I have no access to the algorithm of Google.
There is nothing semantic when a tag is used purely for styling purposes. Of course in such a case a compromise needs to be made somewhere. A span is one way, JS is another. I am not sure which would be better, and maybe there is a 3rd way which is better than both and which I didn’t think of.
December 25, 2012 at 12:41 pm #118974wolfcry911ParticipantThis is perfect example of where a span element should be used. Div and span each have no semantic value, but were created for such use – to tailor html to your own needs. They can add value and meaning to the content with attributes, but its not necessary.
December 25, 2012 at 12:45 pm #118975ZoomParticipantAccording to somebody: “Google tends to add a space character before and after span contents”
http://webmasters.stackexchange.com/questions/31066/flipping-text-is-good-for-seoMost people disagree with that. But as I said I prefer to stay on the safe side when possible and be certain that the whole domain is read as a single term by the search engines (and that is more than just spacing).
Anyway, it is really not a huge deal. If there is no better way of targeting that part of the text then I will either add a span or use JS. Thanks for your help.
Maybe in the future there will be some pseudo-element like “::first-letter”, but instead of targeting just the first letter it will allow you to target a range within text.
December 25, 2012 at 1:41 pm #118979wolfcry911ParticipantHere’s one way, but expect you’re looking for something more flexible
http://codepen.io/wolfcry911/pen/IoBtGDecember 25, 2012 at 2:02 pm #118983__Participant> According to somebody: “Google tends to add a space character before and after span contents”
…and that somebody doesn’t explain their case very well. In fact, when pressed, he admits:
> …I noticed it on my own site in 2004-2005, haven’t had any luck finding a recent example, **though I did find counter-examples (no spacing added)** where was being used outside of a heading.
*–[danlefree](http://webmasters.stackexchange.com/questions/31066/flipping-text-is-good-for-seo#comment-30144)
[emphasis added]*Honestly, it doesn’t make much sense to me anyway. A `` is **not** a word separator and specifically does **not** convey any semantic meaning on its own. It’s *intended* for use as a styling hook. It’s the simplest (and entirely correct) solution.
December 25, 2012 at 2:15 pm #118984ZoomParticipant>I haven’t look but isn’t there something coming in future spec that you could target any word within paragraph or heading like p::first-word {} etc.?
I don’t know if it is in a future spec, but searching for “first-word” I came up with this:
https://css-tricks.com/a-call-for-nth-everything/>Here’s one way, but expect you’re looking for something more flexible
Thanks for that. What I am trying to do is to visually split “my-domain.com” in three lines like this:
my
-domain
.comI tried things like restraining the div size and playing with the word-break property but I couldn’t get it to work exactly as I want it. I think at some point I got it almost in some way, but the dash was stack on the “my” instead on the “domain”! This is why I concluded that I need to target “-domain” in order to get what I want, but maybe I am wrong.
December 25, 2012 at 2:25 pm #118985ZoomParticipant>and that somebody doesn’t explain their case very well. In fact, when pressed, he admits:
Yes, I know. But he is number #7 contributor in stackexchange and he claims that he noticed that from personal experience. He is probably wrong, but I would prefer to avoid going the span way if possible.
December 25, 2012 at 2:55 pm #118986__ParticipantYou could always [just use javascript](http://codepen.io/joe/pen/wgsBG).
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.