CSS - SelectorsCSS Selector :CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.There are several different types of selectors in CSS.
The universal selector is used as a wildcard character. It selects all the elements on the pages. < !DOCTYPE html > < html > < head > < style > * { color: green;font-size: 20px;} < /style > < /head > < body > < h2 >This is heading...< /h2 > < p >This is Universal Selector...< /p > < p id="para1">Yes your correct...< /p > < p >Yah...< /p > < /body > < /html >Output : This is heading...This is Universal Selector... Yes your correct... Yah... 2. CSS Element Selector :The element selector selects the HTML element by name. < !DOCTYPE html > < html > < head > < style > p{text-align: center;color: blue;} < /style > < /head > < body > < p >This is CSS Element Selector...< /p > < p id="para1">Yes your correct...< /p > < p >Yah...< /p > < /body > < /html >Output : This is CSS Element Selector... Yes your correct... Yah... 3. CSS Id Selector : The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element. It is written with the hash character (#), followed by the id of the element.Let's take an example with the id "para1". < !DOCTYPE html > < html > < head > < style > p{ text-align: center; color: blue; } < /style > < /head > < body > < p >This is CSS Id Selector...< /p > < p id="para1">Yes it is Id selector...< /p > < /body > < /html >Output : This is CSS Id Selector... Yes it is Id selector... 4. CSS Class Selector : The class selector selects HTML elements with a specific class attribute.It is used with a period character. (full stop symbol) followed by the class name. < !DOCTYPE html > < html > < head > < style > .centeralign{ text-align: center; color: blue; } < /style > < /head > < body > < h1 class="centeralign">This heading is blue and center-aligned.< /h1 > < p class="centeralign">This paragraph is blue and center-aligned.< /p > < /body > < /html >Output : This heading is blue and center-aligned.This paragraph is blue and center-aligned. CSS Class Selector for specific element : If you want to specify that only one specific HTML element should be affected then you should use the element name with class selector.Let's see an example. < !DOCTYPE html > < html > < head > < style > p.center{ text-align: center; color: blue; } < /style > < /head > < body > < h1 class="center">This heading is not affected< /h1 > < p class="center">This paragraph is blue and center-aligned.< /p > < /body > < /html > This heading is not affectedThis paragraph is blue and center-aligned. 5. CSS Group Selector The grouping selector is used to select all the elements with the same style definitions. Grouping selector is used to minimize the code. Commas are used to separate each selector in grouping. Let's see the CSS code without group selector. h1 { text-align: center; color: blue; } h2 { text-align: center; color: blue; } p { text-align: center; color: blue; }As you can see, you need to define CSS properties for all the elements. It can be grouped in following ways: h1,h2,p { text-align: center; color: blue; }Let's see the full example of CSS group selector. < !DOCTYPE html > < html > < head > < style > h1, h2, p { text-align: center; color: blue; } < /style > < /head > < body > < h1 >Hello TesDBAcademy< /h1 > < h2 >Hello TesDBAcademy (In smaller font)< /h2 > < p >This is a CSS group selector paragraph.< /p > < /body > < /html >Output : Hello TesDBAcademyHello TesDBAcademy (In smaller font)This is a CSS group selector paragraph. « Previous Next Topic » (CSS - Types Of CSS & Comments) |