Subtitles of the Movie

There's one more type of Selector that I need to review before we move on and these are called Context Selectors. Contextual Selectors consist of two or more simple selectors separated by a white space; I have an example of two right here. This ID Pound Sign Container Space P, P stands for Paragraph and then this Tag Selector here TD space H3. These Contextual Selectors are constructed to show that the rule will only have an affect when the last selector, in the first case the P Tag is a direct descendant via a the child, grandchild or great grandchild and so on of the first selector and that's the Container. Here the H3 Tag in this style will only take precedence when this tag inside or a child of the TD Tag or the Table Tag or more precisely the Table Row Tag. So if the browser does not find the exact match, for example it only finds one of the elements outside of the other element, it will not apply the styles dictated by the Contextual Selector to them. So I prepared an example here to demonstrate this, kind of abstract but once you do it a few times it'll make sense to you. Notice that I have an H3 Tag selector here, I'm redefining the H3 Tag so that all the text applied to that tag will be read and notice that here, let's go ahead and open up my HTML, I think it might be easier if we look at the HTML as well. Notice that here I have an H3 Tag and this text will in fact be read based on the Selector that I've and the rule that I've determined here. Now I also have another H3 Tag, this one is Blue and because this is in a Contextual Selector the only time the text will be blue is when the H3 Tag is inside of a TD Tag. So I have here a table, let's move this out of the way and I have, go ahead and highlight that. Notice that there is my H3 Tag but it's inside of the TD Tag. In other words it's inside of this table row so it will be styled Blue according to the Contextual Selector that I have established right there. I have another example here, I have an ID there called container that's this Blue Container right here and then I have a Contextual Selector that says whenever you have a text inside of a Paragraph Tag inside of that container that text should also be read. You can see that this gives you a lot more precise control over specifically your, uniquely specifying styling for other elements. For example if I were to place some text inside of this container that was not within a Paragraph Tag, the Container Rule says it should be Blue. So let's insert a Table into this Container, now the text that type in here is not constrained within a Paragraph Tag so the text will be blue. As you can see it is, text is blue. We will be looking at these Contextual Selectors a little bit later in the course when we review DIV Elements, this is the most likely area that you'll use Contextual Selectors, these are DIV Elements by the way, these IDs that have the Pound Signs in front of them. But let me now move onto the next movie and review when you should be using classes and when you should be using ID Selectors.