Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
CSS Articles
Page 106 of 130
Role of CSS :not (selector) Selector
The CSS :not() selector is used to select and style every element that does not match the specified selector. This pseudo-class selector allows you to apply styles to all elements except those that match a particular criterion, making it useful for creating exclusion-based styling rules. Syntax :not(selector) { property: value; } Example: Basic :not() Selector The following example demonstrates how to style all elements except paragraphs − p { color: red; ...
Read MoreRole of CSS :link Selector
The CSS :link selector is a pseudo-class used to style all unvisited links on a webpage. It targets anchor elements () that have an href attribute and have not been visited by the user yet. Syntax a:link { property: value; } Example The following example demonstrates how to use the :link selector to style unvisited links with an orange background color − a:link { background-color: orange; ...
Read MoreRole of CSS :last-child Selector
The CSS :last-child selector is a pseudo-class that targets an element that is the last child of its parent container. This selector is commonly used to apply specific styles to the final element in a group, such as removing bottom margins or adding special formatting. Syntax selector:last-child { property: value; } Example: Styling Last Paragraph The following example demonstrates how to style the last paragraph element with an orange background − p:last-child { ...
Read MoreRole of CSS :last-of-type Selector
The CSS :last-of-type selector targets the last element of its type among siblings within the same parent element. It's particularly useful for styling the final occurrence of specific HTML elements without needing to add classes or IDs. Syntax element:last-of-type { property: value; } Example: Basic Usage The following example applies an orange background to the last paragraph element − p:last-of-type { background-color: orange; padding: ...
Read MoreRole of CSS:lang Selector
The CSS :lang selector allows you to apply specific styles to elements based on their language attribute. This pseudo-class selector targets elements that have a specific lang attribute value, making it useful for multilingual websites where different languages may need different styling. Syntax :lang(language-code) { /* CSS properties */ } Example: Styling French Text The following example applies a green background to all paragraph elements with French language attribute − p:lang(fr) { ...
Read MoreStyle all elements with an invalid value with CSS
To style all elements with an invalid value, use the CSS :invalid pseudo-class selector. This selector targets form elements that contain invalid data based on their type, pattern, or required attributes. Syntax selector:invalid { property: value; } How It Works The :invalid pseudo-class automatically applies styles to form elements when their values don't meet validation criteria. This includes invalid email formats, numbers outside specified ranges, or empty required fields. Example: Invalid Email Input The following example styles an email input with a red background when the email format ...
Read MoreRole of CSS :invalid Selector
The CSS :invalid pseudo-class selector targets form elements that fail validation constraints. It automatically applies styles to input fields when their values don't meet the specified requirements, providing immediate visual feedback to users. Syntax selector:invalid { property: value; } Example: Email Validation Styling The following example applies a red background to an email input when the value is invalid − input:invalid { background-color: #ffcccc; ...
Read MoreStyle links on mouse over with CSS
To style links on mouse over with CSS, use the :hover pseudo-selector. This selector allows you to apply styles when a user hovers their mouse cursor over an element. Syntax a:hover { property: value; } Example: Basic Link Hover Effect The following example changes the background color of a link when you hover over it − a { text-decoration: none; padding: 10px 15px; ...
Read MoreRole of CSS :first-of-type Selector
The CSS :first-of-type pseudo-class selector targets the first element of its type among siblings within the same parent container. It's particularly useful for styling the first occurrence of specific HTML elements without adding extra classes. Syntax element:first-of-type { property: value; } Example: First Paragraph Styling The following example demonstrates how to style the first paragraph element within its parent − p:first-of-type { background-color: orange; ...
Read MoreRole of CSS: first-child Selector
The CSS :first-child selector targets the first child element of its parent, regardless of element type. It's commonly used to apply special styling to the first item in a list or the first paragraph in a container. Syntax selector:first-child { property: value; } Example: Basic Usage The following example styles every element that is the first child of its parent − p:first-child { background-color: orange; ...
Read More