Internet, Networking, & Security Web Development What Is a CSS Selector? by Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated on February 18, 2020 Degui Adil / Getty Images Web Development CSS & HTML Web Design SQL Tweet Share Email CSS relies on pattern matching rules to determine which style applies to which element in the document. These patterns are called selectors and they range from tag names (for example, p to match paragraph tags) to very complicated patterns that match very specific parts of a document. For example, p#myid > b.highlight would match any b tag with a class of highlight that is a child of the paragraph with the id myiA CSS selector is the part of a CSS style call that identifies what part of the web page should be styled. The selector contains one or more properties that define how the selected HTML The CSS Selectors There are several different types of selectors: type selectors – matching a specific elementclass selectors – matching elements with a specific classID selectors – matching the element with a specific IDdescendant selectors – matching elements that are descendants of a specific elementchild selectors – matching elements that are a child of the specific elementuniversal selectors – matching any elementadjacent sibling selectors – matching elements immediately preceded by a specific elementattribute selectors – matching elements with a specific attribute or attribute valuepseudo-class selectors – matching elements with a specific pseudo-classpseudo-element selectors – matching elements with specific pseudo-element properties Format CSS Styles and CSS Selectors The format of a CSS style looks like this: selector { style property : style ; } Separate multiple selectors that have the same style with commas. This is called selector grouping. For example: selector1, selector2 { style property : style ; } Grouping selectors is a shorthand mechanism to keep your CSS styles compact. The above grouping would have the same effect as: selector1 { style property : style ; }selector2 { style property : style ; } Always Test Your CSS Selectors Not all older browsers support all the CSS selectors. If you are setting up CSS for use with browsers as old as IE8 or older, be sure to test your selectors in as many browsers on as many operating systems as you think might be used to access your code. If you are using CSS1, CSS2, or CSS3 selectors for use with current browsers, you should be fine. Was this page helpful? Thanks for letting us know! Get the Latest Tech News Delivered Every Day Email Address Sign up There was an error. Please try again. You're in! Thanks for signing up. There was an error. Please try again. Thank you for signing up. Tell us why! Other Not enough details Hard to understand Submit