Forums

  • # December 25, 2012 at 10:47 am

    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.com

    is 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

    Yes, 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

    >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

    This 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

    According 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-seo

    Most 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

    Here’s one way, but expect you’re looking for something more flexible
    http://codepen.io/wolfcry911/pen/IoBtG

    __
    # December 25, 2012 at 2:02 pm

    > 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

    >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:
    http://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
    .com

    I 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

    >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

    You could always [just use javascript](http://codepen.io/joe/pen/wgsBG).

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag