Monday, 19 November 2012

CSS selector

When it comes to selecting html tags by their ID or Class specifically in SharePoint you have id's that look like this"WebPartctl00_m_g_e7bf4283_529c_413e_884c_10c2adb8690a", now wtf is the jargon after webpart? I don't want to create a css selector that looks like

div#WebPartctl00_m_g_e7bf4283_529c_413e_884c_10c2adb8690a

so instead i'd use an attribute selector

div[id^="WebPart"] {
  font-size:1.5em
}

or i could use

div[id*="Part"] {
  font-size:1.5em
}

or if i hate myself

div[$="ctl00_m_g_e7bf4283_529c_413e_884c_10c2adb8690a"] {
  font-size=1.5em
}

so to sum it up

^= "selects text at the beginning of the attribute"
*= "selects text that's contained in our attribute"
$= "selects text at the end of the attribute"