How to do CSS attribute selector with title~= that

Question

This question already has an answer here:

• CSS attribute selector does not work a href 1 answer

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!

Answer 1

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

The |= operator matches beginning.

Answer 2

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"