Join Eric Greene for an in-depth discussion in this video Overview, part of CSS Selectors for React Developers.
(inspirational music) - [Instructor] So what exactly do selectors do for us? Selectors are used to connect style declarations to elements. Now, CSS supports many kinds of simple selectors, in the previous course we talked a little bit about simple selectors, compound selectors, and complex selectors. Well there are many different types of simple selectors, we've explored before the type selector, the class selector, and the ID selector, but we can also use for example selectors based upon the attribute or what are known as pseudo-class selectors as well as pseudo-element selectors.
In fact, using these web browser API functions with CSS selectors actually allows us to stop using some of the older legacy functions, such as get element by ID, or get elements by tag name. Now in order to work with selectors and apply styling it's essential that we have valid HTML. If you are not sure how HTML works I highly encourage you to go read the specifications for HTML, particularly those on content categories.
If you violate the rules of content categories, even if your selector is technically correct, according to the way you've coded your HTML, the browser in many cases will still not apply your styles. And that's because you have to follow the rules of HTML. Now HTML and CSS are actually interesting in the sense that web browsers don't throw errors when you make mistakes. It just simply tries to do it's best or it ignores the bad syntax.
So it's important you really understand how these things work, CSS and HTML, otherwise you could write a bunch of code, think it's going to work, but then it just doesn't look right and yet there's no actual error. So it's really important to go read the specifications and learn the details. A great example of this is the div element and a p element. Now you can have a paragraph element inside of a div tag no problem, but if you try to put a div tag inside of a paragraph element things are not going to work out well for you.
The browser doesn't complain about it, but if you try to apply any styles to that div element inside of the paragraph element, those styles will not be applied, why? Because we're violating the content categories. P elements only allow phrasing content, think of paragraphs of text, they don't allow flow content, which is what a div is. So if you try to put flow content inside of an element that only from it's phrasing content, then you're going to have a problem styling your page.
If you've never heard of content categories, you've never heard of phrasing content versus flow content you need to go read up on that, if you want to ensure that your HTML a, is structured correctly, and b, your styles are going be applied.