Select HTML Elements and apply CSS | Ultimate Guide

Select HTML Elements and apply CSS | Ultimate Guide

Selectors:-

1. * all elements
2. div all div tags
3. div, p all div tags and p tags
4. div p all p tags inside div tags
5. div >p all p tags inside div at first level
6. div + p all p tags immediately after div ( at parallel, not child or parent )
7. div ~ p all p tags preceded by div ( at parallel, not child or parent )
8. .classname all elements (e.g. p, div, etc.) having class="classname"
9. div.classname all div having class="classname"
10. #idname             one div having id="idname" (NOTE: In one html page only one id can exist, simultaneously.)
11. div#idname        one div having id="idname"
12. #idname * all elements inside id="idname"

CSS selectors are used to select HTML elements and apply styles to them. Here are some common examples of CSS selectors:

1. Tag Selector: Selects all elements with a specific tag name. For example, to apply a style to all paragraph elements, you can use the following syntax:

p { color``: blue; }

1. Class Selector: Selects elements with a specific class attribute. Classes are used to style multiple elements. For example:

.highlight { background-color``: yellow; }

1. ID Selector: Selects a single element with a specific ID. IDs are unique identifiers that can be used to style a single element. For example:

#header { background-color``: green; }

1. Descendant Selector: Selects elements that are descendants of another element. For example:

#header p { color``: red; }

1. Child Selector: Selects elements that are direct children of another element. For example:

#header > p { color``: red; }

1. Adjacent Sibling Selector: Selects elements that are directly after a specified element. For example:

h1 + p { color``: blue; }

1. Attribute Selector: Selects elements based on their attribute values. For example:

a``[target="_blank"] { color``: blue; }

Here are some of the advanced CSS selectors:

1. Universal Selector: Selects all elements. For example:

* { margin``: 0``; padding``: 0``; }

1. Pseudo-class Selector: Selects elements based on their state or position. For example:

a``:hover { color``: blue; } p``:first``-child { font-weight``: bold; }

1. Pseudo-element Selector: Selects specific parts of an element. For example:

p``::first-letter { font-size``: larger; } p``::before { content``: "Note: "``; }

1. Combinators: Allow you to select elements based on their relationship to other elements. For example:

div h1 { font-size``: larger; } li > a { font-weight``: bold; }

1. Attribute Selector: Selects elements based on their attribute values. For example:

a``[target="_blank"] { color``: blue; } input``[type="text"] { width``: 200px``; }

1. Substring Attribute Selector: Selects elements based on the presence of a substring in an attribute value. For example:

a``[href*="example"] { color``: blue; }

1. Substring Attribute Selector with Prefix: Selects elements based on the presence of a substring with a specific prefix in an attribute value. For example:

a``[href^="https"] { color``: blue; }

1. Substring Attribute Selector with Suffix: Selects elements based on the presence of a substring with a specific suffix in an attribute value. For example:

a``[href$=".pdf"] { color``: blue; }

1. Not Selector: Selects all elements that do not match a specified selector. For example:

:not``(p) { margin-bottom``: 1em``; }

These advanced selectors allow you to create more complex and specific styles for your HTML elements.

1. Class and ID Selectors: Select elements based on their class or ID attribute. For example:

.highlight { background-color``: yellow; } #header { background-color``: lightgray; }

1. Adjacent Sibling Selector: Selects elements that are directly after another element. For example:

h1 + p { font-size``: smaller; }

1. General Sibling Selector: Selects elements that come after another element. For example:

h1 ~ p { font-size``: smaller; }

1. Child Selector: Selects elements that are children of another element. For example:

ul > li { list-style-type``: square; }

1. Descendant Selector: Selects elements that are descendants (children, grandchildren, etc.) of another element. For example:

div p { font-size``: smaller; }

1. Media Queries: Select elements based on the size and type of the device they are being displayed on. For example:

@media screen and (``max-width``: 600px``) {  h1 { font-size``: smaller;  } }

These advanced CSS selectors give you a lot of control over the styles applied to your HTML elements, and help you create responsive, dynamic websites that look great on any device.