Garavani Garavani - 6 months ago 10
CSS Question

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

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

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"

Comments