What is included in CSS Selector Samples?

This page includes curated sample entries, related tools, and neighboring sample collections for CSS Selector Samples.

Elysia Tools

Navigation

Developer Tools

CSS Selector Samples

Collection of CSS selector examples for extraction and analysis testing

Samples

Entries inside this sample collection

TextcssSimple

Basic Class Selectors

Simple CSS class selectors including single, multiple, and chained classes

Difficulty

1/10

Estimated time

5 min

Tags

css, classes, basic, selectors

css

/* Basic CSS with class selectors */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  background-color: #333;
  color: white;
  padding: 15px;
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button-primary {
  background-color: #007bff;
  color: white;
}

.button-secondary {
  background-color: #6c757d;
  color: white;
}

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.card-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-body {
  color: #666;
  line-height: 1.6;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}

.col {
  flex: 1;
  padding: 10px;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }

lineCount: 80
fileSize: 1.2 KB
category: css-selectors
useCase: Basic class selector extraction

TextcssSimple

ID Selectors

CSS ID selectors including single and combined with classes

Difficulty

1/10

Estimated time

5 min

Tags

css, ids, selectors, identifiers

css

/* CSS with ID selectors */
#main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

#header {
  background: #333;
  padding: 20px;
}

#logo {
  font-size: 24px;
  font-weight: bold;
  color: white;
  text-decoration: none;
}

#navigation {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

#navigation li {
  margin-right: 20px;
}

#navigation a {
  color: white;
  text-decoration: none;
}

#content {
  padding: 40px 20px;
}

#sidebar {
  width: 300px;
  float: left;
}

#main-content {
  margin-left: 320px;
}

#footer {
  background: #333;
  color: white;
  padding: 20px;
  text-align: center;
  clear: both;
}

#search-box {
  width: 300px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

#submit-button {
  background: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#hero-section {
  background-image: url('hero.jpg');
  background-size: cover;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero-title {
  font-size: 48px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

#contact-form {
  max-width: 500px;
  margin: 0 auto;
}

#map-container {
  width: 100%;
  height: 400px;
  background: #f0f0f0;
}

lineCount: 97
fileSize: 1.5 KB
category: css-selectors
useCase: ID selector extraction

TextcssIntermediate

Combined Selectors

Complex CSS selectors combining classes, IDs, elements, and pseudo-classes

Difficulty

3/10

Estimated time

10 min

Tags

css, combined, pseudo-classes, attributes

css

/* Combined selectors - classes, IDs, elements, and pseudo-classes */
.container #header {
  background: #333;
  padding: 20px;
}

.nav-bar .menu-item {
  display: inline-block;
  margin-right: 20px;
}

.nav-bar .menu-item:hover {
  color: #007bff;
}

.nav-bar .menu-item.active {
  font-weight: bold;
  color: #007bff;
}

.button-primary:hover {
  background-color: #0056b3;
}

.button-primary:active {
  transform: translateY(2px);
}

.card .card-title {
  font-size: 24px;
  font-weight: bold;
}

.card .card-body p {
  line-height: 1.6;
  color: #666;
}

.form-group input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
}

.form-group input[type="email"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
}

.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  min-height: 100px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  min-width: 200px;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.table-striped tr:nth-child(odd) {
  background-color: #f9f9f9;
}

.table-striped tr:nth-child(even) {
  background-color: #fff;
}

.alert-success {
  background-color: #d4edda;
  color: #155724;
  padding: 15px;
  border-radius: 5px;
}

.alert-error {
  background-color: #f8d7da;
  color: #721c24;
  padding: 15px;
  border-radius: 5px;
}

.pagination .page-item:first-child .page-link {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pagination .page-item:last-child .page-link {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.input-group .input-group-addon {
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  padding: 10px;
}

.modal .modal-header {
  padding: 15px;
  border-bottom: 1px solid #dee2e6;
}

.modal .modal-body {
  padding: 15px;
}

.modal .modal-footer {
  padding: 15px;
  border-top: 1px solid #dee2e6;
}

lineCount: 120
fileSize: 2.8 KB
category: css-selectors
useCase: Combined selector analysis

TextcssIntermediate

Media Query Selectors

CSS selectors within @media queries for responsive design

Difficulty

4/10

Estimated time

12 min

Tags

css, media queries, responsive, breakpoints

css

/* CSS with media queries */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

@media (max-width: 1200px) {
  .container {
    max-width: 960px;
  }

  .col-md-6 {
    width: 50%;
    float: left;
  }
}

@media (max-width: 992px) {
  .container {
    max-width: 720px;
  }

  .col-sm-12 {
    width: 100%;
  }

  .header {
    padding: 10px;
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 540px;
    padding: 15px;
  }

  .nav-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-bar .menu-item {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .sidebar {
    width: 100%;
    float: none;
  }

  .main-content {
    margin-left: 0;
  }
}

@media (max-width: 576px) {
  .container {
    max-width: 100%;
    padding: 10px;
  }

  .button {
    width: 100%;
    margin-bottom: 10px;
  }

  .card {
    padding: 15px;
  }

  .card-title {
    font-size: 20px;
  }
}

@media print {
  .container {
    max-width: 100%;
  }

  .no-print {
    display: none;
  }

  .print-only {
    display: block;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .col-lg-4 {
    width: 33.333%;
    float: left;
  }
}

@media (orientation: landscape) {
  .banner {
    height: 300px;
  }
}

@media (orientation: portrait) {
  .banner {
    height: 200px;
  }
}

lineCount: 115
fileSize: 2.9 KB
category: css-selectors
useCase: Media query selector extraction

TextcssIntermediate

Keyframe Animation Selectors

CSS selectors and keyframes for animations

Difficulty

4/10

Estimated time

10 min

Tags

css, keyframes, animations, transforms

css

/* CSS with keyframes and animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

.animate-fadeIn {
  animation: fadeIn 1s ease-in;
}

.animate-slideIn {
  animation: slideIn 0.5s ease-out;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

.animate-rotate {
  animation: rotate 2s linear infinite;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-shake:hover {
  animation: shake 0.5s;
}

@-webkit-keyframes slideUp {
  from {
    -webkit-transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

lineCount: 105
fileSize: 2.1 KB
category: css-selectors
useCase: Keyframe and animation selector extraction

TextcssComplex

Nested SCSS-like Selectors

CSS with nested selectors similar to SCSS/LESS preprocessing

Difficulty

5/10

Estimated time

15 min

Tags

css, nested, scss, less, preprocessors

css

/* SCSS-like nested selectors */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.container .header {
  background: #333;
  padding: 20px;
}

.container .header .logo {
  font-size: 24px;
  color: white;
}

.container .header .nav {
  display: flex;
  justify-content: space-between;
}

.container .header .nav .menu-item {
  margin-right: 20px;
}

.container .header .nav .menu-item:hover {
  color: #007bff;
}

.container .content {
  padding: 40px 20px;
}

.container .content .sidebar {
  width: 300px;
  float: left;
}

.container .content .sidebar .widget {
  background: #f5f5f5;
  padding: 20px;
  margin-bottom: 20px;
}

.container .content .sidebar .widget .widget-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.container .content .main {
  margin-left: 320px;
}

.container .content .main .article {
  margin-bottom: 30px;
}

.container .content .main .article .article-title {
  font-size: 32px;
  margin-bottom: 15px;
}

.container .content .main .article .article-meta {
  color: #999;
  font-size: 14px;
  margin-bottom: 15px;
}

.container .content .main .article .article-content {
  line-height: 1.8;
  color: #333;
}

.container .content .main .article .article-content p {
  margin-bottom: 15px;
}

.container .footer {
  background: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

.dropdown {
  position: relative;
}

.dropdown .dropdown-toggle {
  background: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ddd;
  min-width: 200px;
  z-index: 1000;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown .dropdown-menu .dropdown-item {
  padding: 10px 20px;
  display: block;
  color: #333;
  text-decoration: none;
}

.dropdown .dropdown-menu .dropdown-item:hover {
  background: #f5f5f5;
}

lineCount: 124
fileSize: 3.2 KB
category: css-selectors
useCase: Nested selector extraction and analysis

TextcssIntermediate

Pseudo-classes and Pseudo-elements

CSS selectors with various pseudo-classes and pseudo-elements

Difficulty

4/10

Estimated time

12 min

Tags

css, pseudo-classes, pseudo-elements, advanced

css

/* CSS with pseudo-classes and pseudo-elements */
a:hover {
  color: #007bff;
  text-decoration: underline;
}

a:visited {
  color: #6c757d;
}

a:active {
  color: #0056b3;
}

a:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

input:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

input:checked + label {
  font-weight: bold;
}

input:required {
  border-color: #dc3545;
}

input:valid {
  border-color: #28a745;
}

input:invalid {
  border-color: #dc3545;
}

:first-child {
  font-weight: bold;
}

:last-child {
  margin-bottom: 0;
}

:nth-child(odd) {
  background-color: #f9f9f9;
}

:nth-child(even) {
  background-color: #fff;
}

:nth-child(3n) {
  border-left: 2px solid #007bff;
}

:first-of-type {
  text-transform: uppercase;
}

:last-of-type {
  margin-right: 0;
}

:not(.exclude) {
  padding: 10px;
}

:lang(en) {
  font-family: Arial, sans-serif;
}

::before {
  content: "\2192";
  margin-right: 5px;
}

::after {
  content: "\2190";
  margin-left: 5px;
}

::first-letter {
  font-size: 24px;
  font-weight: bold;
  color: #007bff;
}

::first-line {
  font-weight: bold;
  color: #333;
}

::selection {
  background: #007bff;
  color: white;
}

::placeholder {
  color: #999;
  font-style: italic;
}

li:first-child::before {
  content: "First: ";
}

li:last-child::after {
  content: " (Last)";
}

p:not(.exclude)::first-line {
  font-weight: bold;
}

a.external::after {
  content: "\2197";
}

lineCount: 127
fileSize: 2.7 KB
category: css-selectors
useCase: Pseudo-class and pseudo-element extraction

TextcssIntermediate

Attribute Selectors

CSS selectors using various attribute matching patterns

Difficulty

4/10

Estimated time

12 min

Tags

css, attributes, selectors, advanced

css

/* CSS with attribute selectors */
input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
}

input[type="email"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
}

input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
}

input[type="submit"] {
  background: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

a[href^="https://"] {
  color: #28a745;
}

a[href^="http://"] {
  color: #dc3545;
}

a[href^="#"] {
  color: #007bff;
}

a[href$=".pdf"]::after {
  content: " (PDF)";
}

a[href$=".doc"]::after {
  content: " (DOC)";
}

a[href$=".xls"]::after {
  content: " (XLS)";
}

img[alt] {
  border: 2px solid #28a745;
}

img[alt=""] {
  border: 2px solid #dc3545;
}

[class*="col-"] {
  float: left;
  padding: 10px;
}

[data-toggle="dropdown"] {
  cursor: pointer;
}

[data-dismiss="modal"] {
  background: #dc3545;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

[data-target^="#collapse"] {
  cursor: pointer;
}

[data-spy="scroll"] {
  position: relative;
}

[aria-hidden="true"] {
  display: none;
}

[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

[readonly] {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

[required] {
  border-color: #dc3545;
}

[multiple] {
  height: 100px;
}

[name="email"] {
  width: 100%;
}

[name~="first-name"] {
  width: 48%;
}

[name|="en"] {
  font-family: Arial, sans-serif;
}

input[class~="form-control"] {
  border: 1px solid #ced4da;
}

a[rel~="nofollow"] {
  color: #999;
}

div[id^="section-"] {
  padding: 20px;
  margin-bottom: 20px;
}

div[id$="-container"] {
  background: #f5f5f5;
  padding: 20px;
}

[data-info*="user"] {
  font-weight: bold;
}

lineCount: 144
fileSize: 3.1 KB
category: css-selectors
useCase: Attribute selector extraction

Tools

CSS Selector Samples

Entries inside this sample collection

Basic Class Selectors

ID Selectors

Combined Selectors

Media Query Selectors

Keyframe Animation Selectors

Nested SCSS-like Selectors

Pseudo-classes and Pseudo-elements

Attribute Selectors

Tools frequently paired with this sample

Related sample collections

Sample-focused context for search and workflow understanding

Overview

When to use

How it works

Use cases

FAQ

CSS Selector Extractor

CSS Selector Specificity Calculator

CSS Beautifier

CSS Fluid Typography Clamp Calculator

CSS Text Shadow Generator

CSV Column Selector

CSS Gradient Text Generator

CSS Animation Generator

Hardhat Development Framework Samples

Truffle Development Suite Samples

Jest Testing Framework

Copyright-Free MP3 Audio Samples

PDF Samples

SVG Samples