Error Message
Learn CSS Selector :
Basic Selectors :
'*' is a Universal Or Wildcard selector. It chooses all of the elements and applies CSS properties.
Universal Selector[*] :
The CSS class selector checks elements based on the contents of their class. Choose an element that has a class.
<div>
<nav class="menu">
<ul>
<li><a href="#">content</a></li>
</ul>
</nav>
</div>
The element selectors choose the elements by the element name or a list of element names and then use CSS properties for the chosen elements.
Type Selector :
The CSS class selector checks elements founded on the contents of their class. Select an element that has a class.
<div class="banner">
<h1 id="heading">Heading..</h1>
<p>content1..</p>
<span>content2..</span>
</div>
Attribute Selectors :
This selector represents an element with an "attribute name" attribute, whatever the value of the attribute.
<body>
<a target="_blank">
Content...
</a>
</body>
This selector means an element with the "attribute name" attribute whose value is a whitespace-separated list of terms, one of which is exactly "value".
If "value" contains whitespace, it will never represent anything (since the words are separated by spaces).
If "value" is the empty string, it will never represent anything.
<body>
<h2 class="title">
Content...
</h2>
<h2 class="titleColors">
Content1..
</h2>
</body>
This selector means an element with the "attribute name" attribute, its value either being exactly "value" or beginning with "value" immediately followed by "-".
This is mainly intended to allow language subcode matches.
<body>
<p class="text-small">
Content...
</p>
<p class="text-down">
Content1..
</p>
</body>
This selector means an element with the "attribute name" attribute whose value contains at least one instance of the substring "value".
If "value" is the empty string, then the selector does not convey anything.
<body>
<h3 class="title">
Content...
</h3>
<h3 class="title">
Content1...
</h3>
</body>
This selector represents an element with the "attributename" attribute whose value is exactly "value".
There needs to be a matching class in the HTML:
<body>
<a class="exam">
Content...
</a>
</body>
This selector represents an element with the "attribute name" attribute whose value begins with the prefix "value".
If "value" is the empty string then the selector does not represent anything
<body>
<span class="content">
Content...
</span>
<span class="content-right">
Content1...
</span>
</body>
This selector means an element with the "attribute name" attribute whose value ends with the suffix "value".
If "value" is the empty string, then the selector does not convey anything.
<body>
<span class="test">
Content...
</span>
<span class="test-demo">
Content1...
</span>
</body>
Pseudo Elements :
The ::first-line selector is utilized to add a style to the foremost line of the specified selector.
<body> <p> demo ... </p> </body>
::selection represents the text chosen by the user in the associated element.
<body> <div> Content... </div> </body>
::before selects the content rendered from CSS, and the generated content is before the associated element.
<body> <div> demo .... </div> </body>
::first-letter selects the first letter of the associated element and uses CSS properties.
<body> <p> demo .... </p> </body>
::after selects the content generated from CSS, the rendered content is after the associated element.
<body> <div> Content... </div> </body>
::placeholder pseudo element chooses the input elements that have placeholder attribute.
<body> <input type="text" placeholder="First name"> </body>
Input Pseudo Elements :
:disabled pseudo class chooses the input element that stands disabled by the disabled attribute.
<body>
<input type="text"
name="abc" disabled>
</body>
:checked chooses the input elements already checked or checked by the user.
<body>
<input type="text"
name="abc" checked>
</body>
:placeholder-shown pseudo class chooses the elements that have placeholder attribute
<body>
<input type="text"
placeholder="Fname">
</body>
:required pseudo-class chooses the input element that requires information necessarily.
<body>
<input type="name"
value="xyz" required>
</body>
:enabled chooses the input elements that are enabled, and input elements are enabled by default.
<body>
<input type="text"
name="abc">
</body>
:read-only pseudo-class chooses the input elements that contain read-only attributes.
<body>
<input type="text"
value="abc" read-only>
</body>
:out-of-range pseudo-class chooses the input element where the value is out of coverage.
<body>
<input type="number"
min= "90" max= "450">
</body>
User Action Pseudo Classes :
:link element chooses and applies CSS properties to all of the hyperlinks.
<body>
<a href="...."target="_blank">
Content...
</a>
</body>
:visited applies CSS properties to the hyperlink which has already been visited.
<body>
<a href="...." target="_blank">
Content...
</a>
</body>
:hover applies CSS properties to the hyperlink at the time mouse hover over the link.
<body>
<a href="...." target="_blank">
Content...
</a>
</body>
:active pseudo-class applies CSS properties to the hyperlink within the involved duration (the time between mouse clicking and releasing).
<body>
<a> href="...." target="_blank" <
Content...
/a>
</body>
Structural Pseudo Classes :
The :first-child pseudo-class describes an element that is the first child of some other element. Same as :nth-child(1).
First-Child Pseudo Selector :
The :last-child pseudo-class defines an element that is the last child of some other element. Same as :nth-last-child(1).
Last-Child Pseudo Selector :
The :only-child pseudo-class defines an element that has a parent element and whose parent element has no other element, children. Identical as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.
Only-Child Pseudo Selector :
:nth-last-child(E) selects the child element in agreement with the value of an expression (E) that considers the element's position from the end.
Nth-Of-Type(E) Pseudo Selector :
:nth-last-of-type(E) selects the child of a distinct type of element in accordance with the value of expression (E) that evaluates to the role of element from the end. In this case, parent has more than one kinds of elements.
Nth-Last-Of-Type(N) Pseudo Selector :
:nth-child(E) selects the child element in agreement with the value of an expression (E) that assesses the position of the element from the start.
Nth-Child(E) Pseudo Selector :
:nth-last-child(E) selects the child element in agreement with the value of an expression (E) that assesses to the standing of element from the end.
Nth-Last-Child(E) Pseudo Selector :
:first-of-type selects the first child of a distinct type of element. In this case, the parent has more than one kind of element.
First-Of-Type Pseudo Selector :
The :last-of-type pseudo-class defines an element that is the final sibling of its type in the list of children of its parent element. Same as :nth-last-of-type(1).
Last-Of-Type Pseudo Selector :
Combinators :
The descendent combinator selects and applies CSS properties to the arbitrary child element.
<body>
<div> demo... </div>
<div>
<code>
<p> demo... </p>
</code>
<div>
</body>
'+' combinator chooses and applies CSS properties to the next nearest element of the current element.
<body> <code> demo... </code> <p> demo... </p> </body>
The child combinator selects and applies CSS properties to the child element.
<body>
<ul>
<li> demo... </li>
<li> demo... </li>
</ul>
</body>
'~' combinator chooses and applies CSS properties to the next element of the present element.
<body> <code> demo... </code> <p> demo... </p> </body>