How to pattern-match elements using CSS selectors which EITHER starts with “a” OR ends with “b”

Question

Say I have an HTML code as following:

    <div>
     <input id = "adhf" class ="gr"></input>
     <form id = "bkgfsd" class ="fh"></form>
     <input id = "adsada" class ="fr"></input>
    </div>

Now I want to do a pattern matching using CSS selectors so that I can grep elements which EITHER have id beginning with "a" or have class ending with "r".

I know ^ is used to pattern match elements beginning with something and $ is used to pattern match elements ending with something, but how can i create a union set of the two?

What will the exact pattern match CSS selector be in this case?

Answer 1

You don't make any pattern for both conditions since are "or" just use both selectors separeted by a , -comma, something like:

 div > [id^="a"], div > [class$="r"] { background: pink; min-height: 30px; } 

 <div> <input id="and" class="g" placeholder="Target by ID"></input> <form id="other" class="fh">Not Target</form> <input id="be" class="fr" placeholder="Target by class"></input> </div> 

Answer 2

您可以使用特殊的属性选择器，例如[id^=a] id以a开头，或[class$=r]类以r结尾，然后将它们与逗号组合，以便：

[id^=a], [class$=r] { /* styles here */ }