Grow your CSS skills. Land your dream job.

Selecting a substring

  • # 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:16 am

    with span element

    # 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 11:53 am

    You got to be kidding. Span tag got absolutely no influence on SEO if used with proper word spacing. As far as semantics. When used with class to identify certain span value attribute than it’s perfectly semantic (has meaning)

    # 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:20 pm

    in a form of hyphen, that’s considered word spacing also, I didn’t mean only empty string

    Edit: If you concerned about SEO, so than add heading inside your div tag and span that. That will give some more meaning to that value.

    # 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:10 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.?

    # 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 1:59 pm

    interesting, could be useful for few things I can think of

    # 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 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".