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
Web Development Articles
Page 646 of 801
Role of CSS :only-child Selector
The CSS :only-child selector targets elements that are the only child of their parent element. It styles elements when they have no siblings, making it useful for applying special formatting to isolated elements. Syntax element:only-child { property: value; } Example: Styling Only Child Paragraphs The following example demonstrates how the :only-child selector applies styles only to paragraphs that are the sole child of their parent − p:only-child { background-color: orange; ...
Read MoreRole of CSS :only-of-type Selector
The CSS :only-of-type pseudo-class selector is used to style elements that are the only child of their specific type within their parent container. It targets elements that have no siblings of the same element type. Syntax element:only-of-type { /* CSS properties */ } Example: Basic Usage The following example demonstrates how :only-of-type selects paragraph elements that are the only element within their parent − p:only-of-type { background: orange; ...
Read MoreMethods of 3D transforms with CSS3
CSS 3D transforms allow you to manipulate elements in three-dimensional space using the transform property. These methods enable translation, rotation, and scaling along the x, y, and z axes to create depth and perspective effects. Syntax selector { transform: transform-function(values); transform-style: preserve-3d; /* Optional: preserves 3D space for child elements */ } 3D Transform Methods MethodDescription matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)Transforms element using 16 values of a 4x4 matrix translate3d(x, y, z)Moves element along ...
Read MoreRole of CSS :nth-of-type(n) Selector
The CSS :nth-of-type(n) selector is used to select and style elements that are the nth child of their specific type within their parent element. This pseudo-class is particularly useful when you want to target specific elements based on their position among siblings of the same tag type. Syntax element:nth-of-type(n) { property: value; } Possible Values ValueDescription numberSelects the element at the specified position (1, 2, 3, etc.) oddSelects all odd-positioned elements of the same type evenSelects all even-positioned elements of the same type an+bSelects elements using a formula (e.g., ...
Read MoreX-axis 3D transform with CSS3
The CSS rotateX() function is used to rotate an element around its X-axis in 3D space. This creates a horizontal rotation effect, making the element appear to flip vertically. Syntax selector { transform: rotateX(angle); } The angle value can be specified in degrees (deg) or radians (rad). Example The following example demonstrates X-axis 3D rotation by comparing a normal element with a rotated one − div { width: 200px; ...
Read MoreRole of CSS :nth-child(n) Selector
The CSS :nth-child(n) selector allows you to select and style elements based on their position among siblings within a parent element. This powerful pseudo-class selector enables precise targeting of specific child elements without adding extra classes or IDs. Syntax selector:nth-child(n) { property: value; } Possible Values ValueDescription oddSelects every odd-numbered child evenSelects every even-numbered child nSpecific position number (1, 2, 3, etc.) an+bFormula for complex patterns Example 1: Selecting Specific Position The following example styles the fourth paragraph element with an orange background − ...
Read MoreRole 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 More