prisskreative
6/26/2014 - 2:07 PM

Basic CSS Attribute - advanced selectors

Basic CSS Attribute - advanced selectors

/* 

<link href="style.css" rel="stylesheet"> 

Attribute Selector
(Allow us to target elements based on a given attribute or value)
attribute = class
value     = class="form"
Don't use frequent - good use 


cascade style sheet
style closest to element*/


[class]{
	color:white;
}
a[class]{
	color:blue;
}
a[class="form"]{
	color:blue;
}

input [type="text"]{
	background-color:green;
}


/* Advanced Selectors
Substring matching attribute selectors */

a[href^="http://"]{/* begin with selector */
	color:green;
}

a[href^="mailto:"]{/* href contain mailto */
	color:red;
}

a[href$=".pdf"]{/* end with selector */
	color:black;
}

/* contains selector */

img[src*="thumb"]{/* any img that has thumb word */
	border:1px solid #000;
}