October 26, 2024

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:

  1. position
    • Determines how a child element is positioned relative to its parent or the document flow.
    cssCopy code.parent > .child { position: absolute; /* Or relative, fixed, static */ }
  2. display
    • Controls the display type of child elements (block, inline, flex, etc.).
    cssCopy code.parent > .child { display: block; /* Or inline, flex, grid */ }
  3. margin
    • Sets the space outside the child element relative to its parent or sibling elements.
    cssCopy code.parent > .child { margin: 10px; }
  4. padding
    • Sets the space inside the child element, pushing content away from the edges of the child.
    cssCopy code.parent > .child { padding: 15px; }
  5. z-index
    • Controls the stacking order of child elements within their parent.
    cssCopy code.parent > .child { z-index: 5; }

Text and Font:

  1. color
    • Sets the text color for child elements.
    cssCopy code.parent > .child { color: #333; }
  2. font-size
    • Controls the font size of child elements.
    cssCopy code.parent > .child { font-size: 16px; }
  3. text-align
    • Aligns the text inside child elements.
    cssCopy code.parent > .child { text-align: center; }

Flexbox Properties (When Parent Uses Flexbox):

  1. flex
    • Sets the flexibility of a child element within a flex container.
    cssCopy code.parent { display: flex; } .parent > .child { flex: 1; /* or 0 1 auto */ }
  2. align-self
    • Allows a child to override the parent’s align-items value for individual alignment.
    cssCopy code.parent { display: flex; align-items: center; } .parent > .child { align-self: flex-start; }
  3. order
    • Changes the visual order of child elements inside a flex container.
    cssCopy code.parent { display: flex; } .parent > .child { order: 2; }

Grid Properties (When Parent Uses Grid Layout):

  1. grid-column / grid-row
    • Specifies how a child spans across columns or rows in a grid layout.
    cssCopy code.parent { display: grid; } .parent > .child { grid-column: 1 / 3; /* spans from column 1 to 3 */ grid-row: 2; }
  2. justify-self
    • Aligns a child horizontally within its grid cell.
    cssCopy code.parent { display: grid; } .parent > .child { justify-self: end; }
  3. align-self
    • Aligns a child vertically within its grid cell.
    cssCopy code.parent { display: grid; } .parent > .child { align-self: start; }

Other Common Properties for Child Elements:

  1. background-color
    • Applies background color to child elements.
    cssCopy code.parent > .child { background-color: #f0f0f0; }
  2. width and height
    • Specifies the width and height of child elements.
    cssCopy code.parent > .child { width: 50%; height: 100px; }
  3. border
    • Defines the border for child elements.
    cssCopy code.parent > .child { border: 1px solid #ccc; }
  4. box-shadow
    • Adds shadow effects to child elements.
    cssCopy code.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.