Transcription
In this video, I will explain about CSS selectors. What is the use of selectors for us? When using an internal stylesheet or an external stylesheet, we use selectors. What is a selector? A selector tells us to which tag or to which content we need to apply styles. That is called a selector. If we write inline styles directly on the tag, they apply. But if we write styles outside the tag, we need to specify to which tag the styles should apply. That's where selectors come in. Selectors tell us to which element we need to apply styles. In external CSS, we use selectors. Selectors are of five types: simple selectors, combinator selectors, pseudo-class selectors, pseudo-element selectors, and attribute selectors.
What is a simple selector? It's just applying styles to a tag, a class, or an ID. That is called a simple selector. What is a combinator selector? It's a combination of tags, or a combination of a tag and a class, or a tag and an ID. If we want to mix them like this, we use combinator selectors. What is a pseudo-class selector? Every tag has a state. A common state for every tag is 'hover'. What is 'hover'? When the mouse is over it. Similarly, there are states like 'visited', 'unvisited', 'click', etc. If we want to apply a particular style to such a state, we use pseudo-class selectors. In pseudo-element selectors, if we want to apply styles only to some part of the content, for example, in newspapers, the first letter of every paragraph is usually a capital letter, and its size is larger. If we want something like that, we apply styles only to the first letter, first word, or first line within the content of a tag. For that, we use pseudo-element selectors. In attribute selectors, tags have attributes. If we want to apply styles based on the value of an attribute, we use attribute selectors. For example, in form inputs, we have types like 'text', 'password', 'email'. We don't need the same style for all input tags. If we want a particular style for an input tag whose type is 'email', we use attribute selectors for that particular email type.
So, in simple selectors, first, if we want to apply styles to the content of a tag, we select that tag. To select it, we write the tag name. Then, within curly braces (open and close), we write any property or any styles like border, margin, padding, width, etc., whatever we need. For example, if we have a paragraph tag, and we want to apply styles to that paragraph, since the tag name is 'p', if we want the color and background, we give the color value as white and the background color value as green. This is tag-based. Next, what is ID-based? What is the use of ID-based? If we have 10 paragraphs and we just apply a paragraph tag, the same style will apply to all 10 paragraphs. But if I want my style to apply only to specific ones, for that, we use the 'id' attribute for the paragraph and give it a value. For the ID selector, we use the ID name. So, to differentiate between an ID name and a tag name, for an ID, we write a hash symbol before it. Hash ID name. Then, like a tag, we write the properties. If I want to apply a particular style to a paragraph, in the opening tag of the second paragraph, I specify an ID and give it the value 'second'. Using that, styles will apply to the paragraph tags. I will use internal styles in my document, using the 'style' tag. Inside it, I will write selectors. To apply tag-based styles, I select the tag. I tell the browser that for the paragraph tag, apply these styles. I already explained the difference between ID and tag for this purpose. For the paragraph tag, I'll give the color as white. For one property and another property, we need a semicolon. So, this is one property style, and this is another property. We have many styles, each style has a property. So, background, background green. If I apply styles to the 'p' tag, then on my webpage, all paragraphs will have the same style applied. If I want to apply styles only to a specific paragraph, for that, we use the 'id' attribute. In colleges and schools, what is the use of roll numbers? To identify uniquely. Each roll number is unique. So, if this is my paragraph tag, and I want to define this paragraph specially, I will give it a name or a number. I will give it the name 'second'. Through this, I will apply styles. So, to apply styles through ID, the syntax is to denote it with a hash. You know the difference between a tag and an ID, right? For the browser, if it's a tag, it's just the tag name. If it's an ID, it's hash ID name 'second'. So, this second paragraph, if its ID value is 'second', then only to that 'second' paragraph will the style apply. So, only to the second paragraph will the style apply. This is the advantage of using ID. If the ID value is 'second', then it applies. But if we use ID, we use it for uniqueness. It's not meaningful to have a hundred IDs. A roll number is a unique identifier. It applies to our styles. But if we use ID in JavaScript, if we give the same value, it will give us an error. So, remember that the ID value must be unique. So, if I say 'third' here, and I want to apply styles to the ID named 'third', what is the ID name? 'third'. So, since an ID starts with a hash, to select it, I will write '#third'. I will give it a color, say blue.
What is a class-based selector? If we want to apply the same class name to multiple tags, then we use classes. If we define tags related to our class, for example, if we use the 'p' tag, styles will apply to the paragraph. If I have five h1 tags and five paragraph tags, and I want the same style for the second paragraph, third paragraph, second heading, and third heading, what should I do? I can't give separate IDs for each, and writing the same style repeatedly in IDs is difficult. Using only tags is also difficult because it applies to all paragraphs. So, to make it easier, we use classes. I will write four: for the second heading, third heading, second paragraph, and third paragraph, I want the same style. What is the difference between ID and class? For a tag, whether it's a paragraph or a heading, we use the 'class' attribute and give it a value, say 'special'. So, for this 'special' class, we use the 'class' attribute and give the value 'special'. If two paragraphs or two headings are related to that class, and I want the same style for them, then I will apply it to both with the same class. To select a class, we use a dot. Dot. For a class, to apply styles to it, we use a dot. For an ID, we use a hash. So, '.special'. This is the class name. So, for elements that have this class defined, the styles will apply. If I refresh, the second paragraph and the third paragraph, and also the second heading and third heading, will have the styles applied. This concludes simple selectors.
Next, combinator selectors. If we want to select a tag, class, or ID and apply styles to it, we use combinator selectors. If we want to apply styles using a combination of tags, or a class, or a combination of multiple tags, we use combinator selectors. Combinator selectors are of four types: child selector, descendant selector, adjacent sibling selector, and general sibling selector. I will explain each one. First, the child selector. When we open and close a tag, we write other tags inside it. Are these tags direct children or indirect children? A direct child is a tag that is directly opened and closed within another tag. But there are also indirect children. For example, if I take a 'div' tag, and inside it, I write another tag, and inside that, I open and close another tag. So, if I use a paragraph inside a 'div' tag, the 'body' tag has many children. But among these children, which one is a direct child? The remaining are all direct children. What does that mean? A tag that is directly opened and closed within the opening and closing of another tag. So, this 'div' is a direct child, directly opened and closed. But this paragraph tag is not a direct child of the 'body' tag. The 'body' tag is not directly opened. I opened a 'div' tag, and then I wrote a paragraph. So, our paragraph is not a direct child of the 'body', it's just a child. If we want to apply a particular style to a direct child, we use a child selector. For the child selector, we use this symbol: the greater than symbol. If we have a 'div' tag, and inside it, we write a paragraph, and inside that 'div' tag, we have other tags. If we write more tags inside the opening and closing of the 'div' tag. Then, what does it mean? The 'div' tag has many children, but among them, only this paragraph tag is a direct child. But the paragraph tag is an indirect child. If there is a paragraph tag inside a direct child of the 'div' tag, and I want styles for that, I will delete this. So, what do we need? In the 'div' tag, what do we need? There is a paragraph in the 'div' tag. So, we mention the 'div' tag and say that the paragraph is a direct child. To mention such a direct child, we use this symbol: the greater than symbol. The meaning of 'div > p' is that for paragraphs that are direct children inside the 'div' tag, I want my styles. So, I will give the color as white and the background as blue. I already explained paragraph, heading, ID, special. I will remove this. If I refresh the page, only 'This is paragraph div' will have the style applied. Only up to that will the style apply. If we have child tags inside the 'div' tag, and we want styles for 'p', we use the greater than symbol. The meaning is that inside the 'div' tag, wherever there are direct paragraph children, apply the same style. I will write two more here. Inside the 'div' tag, I will open and close it. Inside it, I will write a paragraph tag once, and an h2 tag once. So, I opened a 'div' tag, and inside it, I wrote a paragraph tag directly. So, the style will apply to the first paragraph. So, the paragraph will apply. Next, for our child selector, if we want to apply a particular style to the direct children of our particular tag, we use the child selector. For the child selector, we use the greater than symbol. So, we use the parent and the greater than symbol. This is the child selector.
Next, the descendant selector. So, what is the difference between a child tag, a child selector, and a descendant selector? Okay, if there is a child tag, it has children. For our 'div' tag, the direct children are the paragraph tag and the heading tag. But for a descendant tag, a descendant selector, it doesn't matter if it's direct or indirect. Whether it's directly opened or something else is there, whatever is there, for those, we use the descendant selector. For descendant, we just give a space. So, its meaning is: inside the 'div' tag, within its opening and closing, wherever a paragraph tag appears, apply the style. So, if I refresh this, our paragraph will have the same style applied.
About siblings. Siblings are when we write many tags between a closing tag. If we open and close a tag, what is the relationship between 'p' and 'h2'? 'p' and 'h2' are siblings. 'h2' and 'p' are siblings. So, they are at the same level. Since they are children of the 'div', if we want to apply styles to such elements, we use sibling selectors. This is the adjacent sibling selector. 'Adjacent' means next to. So, if I have four paragraphs, and they are all at the same level, they are siblings. What is the difference? What is the next sibling of a paragraph tag? A next sibling is a tag that appears immediately after the closing of another tag. If I want to apply a particular style to that, it's called a sibling. Here, for the paragraph tag, 'h2' is an adjacent sibling. It's not just a sibling. 'h2' is a tag, and 'p' is a sibling. My sibling requirement is: after a 'p' paragraph. So, I want to apply styles to the adjacent siblings of the 'p' paragraph. For that, we use the plus symbol. So, not in the 'div' tag, sorry, but for the paragraph tag, if there is a heading tag immediately after its closing, I want to apply the same style to that. So, after a tag closes, the sibling that comes automatically, immediately after it opens, that's what we want. So, like this, I will write the same two here. So, for the 'p' tag, if an 'h2' tag opens immediately after it, I want to apply styles to that. So, after the paragraph, if there is an 'h2' tag, only to that 'h2' will the style apply. We use the plus symbol to apply the same style. So, after my paragraph, what is the symbol? Plus. So, using that, the meaning is: wherever on our webpage a paragraph tag opens and closes, and immediately after it, at the same level, if there is an 'h2' tag, apply the same style to it. So, the paragraph tag.