Published on: 17 March, 2015

CSS3 selector with partial ID match

Tumblr Digg Google Plus

In CSS3, you can easily do a partial match ID. This is will be quite handy to use especially when the id of your html tags are automatically generated. See below example on how to use it.

<div id='ctrl_123_wrapper_text'>This is a sample only</div>
In the following example, you will learn 3 ways on how to match the above ID. The operators that are used to match partially of the selectors are ^, $, and *.
/** THE OPERATOR ^ WILL MATCH ELEMENTS THAT HAVE AN ATTRIBUTE CONTAINING A VALUE THAT STARTS WITH GIVEN VALUE **/
div[id^="ctrl_123"] {

}

/** THE OPERATOR ^ WILL MATCH ELEMENTS THAT HAVE AN ATTRIBUTE CONTAINING A VALUE THAT ENDS WITH GIVEN VALUE **/
div[id$="wrapper_text"] {

}

/** THE OPERATOR ^ WILL MATCH ELEMENTS THAT HAVE AN ATTRIBUTE CONTAINING A VALUE THAT CONTAINS THE GIVEN VALUE **/
div[id*="wrapper_text"] {

}

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.