Sasha Grievus
Sasha Grievus

Reputation: 2686

Css Selector for inputs which name contains two words?

It is possibile to use this selector

$( "input[name~='man']" )

to identify any input in page which name contains the word 'man' but if i need to select, instead of a single word pattern i.e. 'man', a pattern containing two words like '(anything)checkbox(anything)man(anything)' so that

<input name="checkbox-foo-man">
<input name="checkbox-bar-man">
<input name="foo-checkbox-foo-man-foo">

gets selected? Possibily, impliying the right order that is 'checkbox' before 'man'

Upvotes: 3

Views: 2363

Answers (1)

c2huc2hu
c2huc2hu

Reputation: 2497

You can do it without regexes by combining selectors. I don't think there's a way to ensure the order this way though.

[name*="foo"][name*="bar"] {
  color: red;
}
<div name="foo-bar"> foo-bar </div> <!-- selected -->
<div name="bar-foo"> bar-foo </div> <!-- selected -->
<div name="foo-bar-baz"> foo-bar-baz </div> <!-- selected -->
<div name="foo-baz"> foo-baz </div>
<div name="bar-baz"> bar-baz </div>

Upvotes: 3

Related Questions