CSS3 selector enhancements

CSS3 selectors play a pivotal role in front-end development, significantly enhancing the flexibility and precision of element targeting. From attribute matching to structural pseudo-classes, new features empower developers to control page styles more efficiently.

Expanded Attribute Selectors

CSS3 enhances attribute selectors with more sophisticated string-matching logic:

/* Matches links with href starting with "https" */
a[href^="https"] {
  color: #4CAF50;
}

/* Matches images with src containing "logo" */
img[src*="logo"] {
  border: 2px solid blue;
}

/* Matches elements with data-type ending in "-primary" */
[data-type$="-primary"] {
  background-color: gold;
}

The new ~= operator matches standalone words in attribute values:

/* Matches elements with class containing the word "alert" */
[class~="alert"] {
  font-weight: bold;
}

Structural Pseudo-Class Selectors

CSS3 introduces structural pseudo-classes for selection based on DOM tree position:

/* Selects the 3rd child element of a parent */
li:nth-child(3) {
  transform: scale(1.1);
}

/* Counting from the end */
tr:nth-last-child(2) {
  background-color: #f5f5f5;
}

/* Odd/even row selection */
tbody tr:nth-of-type(odd) {
  background: #eee;
}

/* Matches the first element of its type */
p:first-of-type {
  text-indent: 2em;
}

The :not() pseudo-class excludes specific elements:

/* Selects all buttons without .disabled class */
button:not(.disabled) {
  cursor: pointer;
}

UI State Pseudo-Class Selectors

More options for form control states:

/* Matches checked checkboxes */
input[type="checkbox"]:checked {
  box-shadow: 0 0 5px #2196F3;
}

/* Matches disabled input fields */
input:disabled {
  opacity: 0.6;
}

/* Styles the current value of range inputs */
input[type="range"]::-webkit-slider-thumb {
  background: #ff5722;
}

/* Matches required fields */
input:required {
  border-left: 3px solid red;
}

Target Pseudo-Class and Language Selectors

:target matches elements corresponding to URL fragments:

/* Activates when URL contains #section1 */
#section1:target {
  animation: highlight 1s;
}

Language selectors precisely match lang attributes:

/* Matches Chinese content */
:lang(zh) {
  font-family: "Microsoft YaHei";
}

Enhanced Combinator Selectors

CSS3 improves selector combinations:

/* Direct adjacent sibling selector */
h2 + p {
  margin-top: 0;
}

/* General sibling selector */
h2 ~ p {
  line-height: 1.6;
}

/* Multiple attribute combination */
input[type="text"][required][placeholder] {
  border-color: #ff9800;
}

New Pseudo-Element Features

::before and ::after gain more styling control:

/* Custom list markers */
li::marker {
  content: "→";
  color: #e91e63;
}

/* Drop-cap effect */
p::first-letter {
  font-size: 200%;
  float: left;
}

/* Text selection styling */
::selection {
  background: #ffeb3b;
  color: #000;
}

Responsive Selection Strategies

Media query integration enables responsive styling:

/* Modify nav styles on mobile */
@media (max-width: 768px) {
  nav > ul > li {
    display: block;
  }
  
  nav > ul > li + li {
    border-top: 1px solid #ddd;
  }
}

Performance Optimization Tips

While powerful, CSS3 selectors require performance awareness:

/* Not recommended - poor performance */
div.container > ul.list > li.item > a.link {}

/* Recommended - more efficient */
.link {
  /* style rules */
}

Avoid universal selector resets:

/* Avoid this approach */
* {
  margin: 0;
  padding: 0;
}

/* Explicitly specify instead */
body, h1, p, ul {
  margin: 0;
  padding: 0;
}

Practical Application Examples

Modern zebra-striping for tables:

/* Using CSS3 selectors */
table {
  width: 100%;
  border-collapse: collapse;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #e3f2fd;
}

Building responsive navigation:

<nav class="responsive-nav">
  <button class="menu-toggle">☰</button>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

.responsive-nav ul {
  display: flex;
}

@media (max-width: 600px) {
  .responsive-nav ul {
    display: none;
  }
  
  .responsive-nav .menu-toggle {
    display: block;
  }
  
  .responsive-nav ul.show {
    display: block;
  }
  
  .responsive-nav li + li {
    border-top: 1px solid #eee;
  }
}

Selector Specificity and Cascade

CSS3 selector specificity rules:

/* Specificity calculation example */
#header .nav li.active a {} /* 1,1,2 */
.nav li a:hover {}         /* 0,2,1 */
body #footer .link {}      /* 1,1,1 */

New :where() and :is() pseudo-classes reduce specificity:

/* Selectors inside :where() have 0 specificity */
:where(article, section) h1 {
  color: blue;
}

/* Equivalent to */
article h1, section h1 {
  color: blue;
}

Future Developments

CSS Selectors Level 4 draft features:

/* Matches elements containing specific text */
p:contains("Important Notice") {
  border-left: 3px solid red;
}

/* Matches empty elements */
div:empty {
  display: none;
}

/* Range-matching pseudo-class */
p:has(> img.highlight) {
  background: yellow;
}