List of CSS :nth-child() Pseudo-class
In CSS, child properties refer to styles that affect or are applied to direct child elements of a parent element. These properties often work with combinators like >
, which targets only the immediate (direct) child elements. While there’s no formal concept of “child properties” specifically, the following properties and selectors are commonly used to style child elements:
1. >
Direct Child Combinator
The direct child combinator (>
) selects only the direct children of a specified element.
cssCopy code.parent > .child {
/* Styles applied only to direct children */
}
2. Commonly Used CSS Properties on Child Elements:
Positioning and Layout:
position
- Determines how a child element is positioned relative to its parent or the document flow.
.parent > .child { position: absolute; /* Or relative, fixed, static */ }
display
- Controls the display type of child elements (block, inline, flex, etc.).
.parent > .child { display: block; /* Or inline, flex, grid */ }
margin
- Sets the space outside the child element relative to its parent or sibling elements.
.parent > .child { margin: 10px; }
padding
- Sets the space inside the child element, pushing content away from the edges of the child.
.parent > .child { padding: 15px; }
z-index
- Controls the stacking order of child elements within their parent.
.parent > .child { z-index: 5; }
Text and Font:
color
- Sets the text color for child elements.
.parent > .child { color: #333; }
font-size
- Controls the font size of child elements.
.parent > .child { font-size: 16px; }
text-align
- Aligns the text inside child elements.
.parent > .child { text-align: center; }
Flexbox Properties (When Parent Uses Flexbox):
flex
- Sets the flexibility of a child element within a flex container.
.parent { display: flex; } .parent > .child { flex: 1; /* or 0 1 auto */ }
align-self
- Allows a child to override the parent’s
align-items
value for individual alignment.
.parent { display: flex; align-items: center; } .parent > .child { align-self: flex-start; }
- Allows a child to override the parent’s
order
- Changes the visual order of child elements inside a flex container.
.parent { display: flex; } .parent > .child { order: 2; }
Grid Properties (When Parent Uses Grid Layout):
grid-column
/grid-row
- Specifies how a child spans across columns or rows in a grid layout.
.parent { display: grid; } .parent > .child { grid-column: 1 / 3; /* spans from column 1 to 3 */ grid-row: 2; }
justify-self
- Aligns a child horizontally within its grid cell.
.parent { display: grid; } .parent > .child { justify-self: end; }
align-self
- Aligns a child vertically within its grid cell.
.parent { display: grid; } .parent > .child { align-self: start; }
Other Common Properties for Child Elements:
background-color
- Applies background color to child elements.
.parent > .child { background-color: #f0f0f0; }
width
andheight
- Specifies the width and height of child elements.
.parent > .child { width: 50%; height: 100px; }
border
- Defines the border for child elements.
.parent > .child { border: 1px solid #ccc; }
box-shadow
- Adds shadow effects to child elements.
.parent > .child { box-shadow: 2px 2px 10px rgba(0,0,0,0.1); }
3. Child Selectors in CSS:
- Direct Child Selector (
>
): Targets only the direct children of an element.cssCopy code.parent > .child { color: blue; }
:nth-child(n)
: Selects a specific child based on its position within the parent.cssCopy code.parent > .child:nth-child(2) { color: red; }
:first-child
and:last-child
: Selects the first or last child of a parent.cssCopy code.parent > .child:first-child { font-weight: bold; }
:only-child
: Targets an element that is the only child of its parent.cssCopy code.parent > .child:only-child { color: green; }
Conclusion:
CSS provides various ways to style child elements of a parent, using combinators like >
, pseudo-classes like :nth-child
, and properties that target individual children. These properties allow you to control layout, text, appearance, and interactions with child elements in a flexible and consistent manner.