CSS Selectors Crash Course

By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Preferences Deny Accept

Privacy Preference Center

When you visit websites, they may store or retrieve data in your browser. This storage is often necessary for the basic functionality of the website. The storage may be used for marketing, analytics, and personalization of the site, such as storing your preferences. Privacy is important to us, so you have the option of disabling certain types of storage that may not be necessary for the basic functioning of the website. Blocking categories may impact your experience on the website.

Reject all cookies Allow all cookies

Manage Consent Preferences by Category

Essential

Always Active

These items are required to enable basic website functionality.

Marketing

Essential

These items are used to deliver advertising that is more relevant to you and your interests. They may also be used to limit the number of times you see an advertisement and measure the effectiveness of advertising campaigns. Advertising networks usually place them with the website operator’s permission.

Personalization

Essential

These items allow the website to remember choices you make (such as your user name, language, or the region you are in) and provide enhanced, more personal features. For example, a website may provide you with local weather reports or traffic news by storing data about your current location.

Analytics

Essential

These items help the website operator understand how its website performs, how visitors interact with the site, and whether there may be technical issues. This storage type usually doesn’t collect information that identifies a visitor.

Confirm my preferences and close

CSS selectors are a fundamental piece of CSS that allow it to select HTML elements based on a collection of parameters that the developer has set. CSS selectors can be used to select elements by type, class, ID, and can be written in a more complex way with the use of combinators. This week we discuss CSS selectors in great detail, covering their syntax, popular use cases, and clearing up (hopefully) some confusing bits that junior developers may struggle with.

Show Notes

Topics & Timestamps

What is a CSS selector? | 00:02:15
- Select elements with varying levels of complexity (ie selecting a class, ID, or HTML element)
CSS Selector Syntax | 00:03:45
- Universal, type, class, ID, attribute, selector list, combinators, pseudo-classes, pseudo-elements
CSS Selector Structure | 00:39:33
- Simple selector
- Compound selector
- Relative selector
- Selector List
Grouping Selectors | 00:48:45
- Categories of selectors (basic, grouping, combinators, pseudo-classes & pseudo-elements)
- Types of selectors (type, class, & ID | attribute selector | pseudo-elements & pseudo-classes | combinators)

Sources

CSS selectors - Learn web development | MDN (mozilla.org)
CSS selectors - CSS: Cascading Style Sheets | MDN (mozilla.org)
Selectors Level 3 (w3.org)
Selectors Level 4 (w3.org)
Relative Selector Example Discussion (links sent in by a listener(@iamaponte), as discussed on the episode)
- CodePen | Twitter

CSS Selectors Crash Course

Listen

Who’s in This Episode?

Show Notes

Topics & Timestamps

Sources

Podcast

Blog

Contact