Common CSS selector syntax you should know

Posted by Fahad Ibnay Heylaal on Sep 23rd 2008, 06:24 - in CSS

You application has been set up and is already running. Right then, you come up with an idea of changing your layout. It may not be possible to add or change class attributes of your html elements throughout the whole application. CSS selectors will come handy in that case (if you know which elements you want to select). Here is a table of common css selector syntax that you may find useful.

The Table

E[foo] Matches an E element with foo attribute
E[foo="bar"] Matches an E element whose foo attribute is (exactly) equal to bar
E[foo^="bar"] Matches an E elelement whose foo attribute begins (exactly) with the string bar
E[foo$="bar"] Matches an E element whose foo attribute ends (exactly) with the string bar
E[foo*="bar"] Matches an E element whose foo attribute contains the substring bar
E[foo|="bar"] Matches an E element whose foo attribute has a hyphen-separated list of values beginning with bar from the left
E:enabled
E:disabled		 Matches an E element that is enabled/disabled
E:contains("foo") Matches an E element containg the substring foo in its textual contents
E + F Matches an F element immediately preceded by an E element
E ~ F Matches an F element preceded by an E element

 

Share: