IMG-LOGO

CSS3 selector with partial ID match

andy - 17 Mar, 2015 17177 Views 0 Comment

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.

Related Articles

How to draw a circle in CSS?

In this article, we are going to learn how to draw a circle in CSS. Firstly what needs to do is to create a CSS class called circle.