Class Selector

Lecture 40:- Class Selector

1. A class selector in CSS is a type of selector that allows you to apply styles to elements with a specific class attribute. A class selector is denoted by a period (.) followed by the class name.

   For example, consider the following HTML code:

   cssCopy code

   <p class="highlight">This is a highlighted paragraph.</p> <p>This is a normal paragraph.</p>

   To style the first paragraph with a class of "highlight", you can use the following CSS code:

   cssCopy code

   .highlight {  background-color: yellow; }

   The CSS selector .highlight matches all elements with a class attribute of "highlight". In this case, the first paragraph will be styled with a yellow background. The second paragraph will not be affected because it does not have the "highlight" class.

   Multiple elements can have the same class, and a single element can have multiple classes. In this case, you can apply styles to all elements with a specific class, or a combination of classes. For example:

   pythonCopy code

   <p class="highlight special">This is a highlighted and special paragraph.</p> <p class="highlight">This is a highlighted paragraph.</p>

   You can use the following CSS code to apply styles to the first paragraph:

   cssCopy code

   .highlight.special {  background-color: green; }

   Here, the selector .highlight.special matches only the first paragraph with both "highlight" and "special" classes. The second paragraph will not be affected because it only has the "highlight" class.