How to do CSS attribute selector with title~= that has to contain a space? [duplicate]

Question

I have the following selector:

.post-link[title~=Corporate]

Now I need, instead, to select only elements whose title have the word "Corporate" only at the very beginning, not somewhere else in the title.

So I have two alternatives:

1) create a selector that only checkes at the very beginning of the title and then skip others eventually following or

2) create a selector which can contain a space plus a '|' like:

.post-link[title~=Corporate |]

because in my case all titles begin with

"Keyword |"

(Corporate | i.g.)

But the css is not working any more when I use:

.post-link[title~=Corporate |] 

I also tried:

.post-link[title~=Corporate |]

Does not work. How to do this? I cannot find answers with Google.

Thanks a lot!

Hahn

Answer 1

Now I need, instead, to select only elements whose title have the word "Corporate" only at the very beginning, not somewhere else in the title.

You can use [title^='Corporate']:

[title^='Corporate'] {
  background: lightgreen;
}

<div title='Corporate foo bar'>Test case 1</div>
<div title='foo Corporate bar'>Test case 2</div>
<div title='Corporate | foobar'>Test case 3</div>

Reference:

E[foo^="bar"]: an E element whose "foo" attribute value begins exactly with the string "bar"

Rockweed

This did the trick, the other not. Thanks!! – Hahn

Answer 2

This should do it. .post-link[title|="Corporate "]

The |= operator matches beginning.

Retro

Thanks for your quick answer. Weird. Doesn’t work in my case. I am checking what could be wrong with my code. – Hahn

The difference between [title^="Sometext"] and [title|="Sometext"] is that the latter needs to be a whole word whereas the first doesn't care about. So only the first one will find <a href="#" title="Sometexting"> but both will find <a href="#" title="Sometext-ing"> – Trigeminal