🎯 Recommended Samples

Balanced sample collections from various categories for you to explore

← Back to Tools ← Back to Samples

CSS Selector Samples

Collection of CSS selector examples for extraction and analysis testing

Key Facts

Category
Developer Tools
Items
8
Format Families
text

Sample Overview

Collection of CSS selector examples for extraction and analysis testing This sample set belongs to Developer Tools and can be used to test related workflows inside Elysia Tools.

📝 Basic Class Selectors css

🟢 simple ⭐

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

⏱️ 5 min 🏷️ css, classes, basic, selectors 
/* 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; }

📝 ID Selectors css

🟢 simple ⭐

CSS ID selectors including single and combined with classes

⏱️ 5 min 🏷️ css, ids, selectors, identifiers 
/* 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;
}

📝 Combined Selectors css

🟡 intermediate ⭐⭐

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

⏱️ 10 min 🏷️ css, combined, pseudo-classes, attributes 
/* 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;
}

📝 Media Query Selectors css

🟡 intermediate ⭐⭐

CSS selectors within @media queries for responsive design

⏱️ 12 min 🏷️ css, media queries, responsive, breakpoints 
/* 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;
  }
}

📝 Keyframe Animation Selectors css

🟡 intermediate ⭐⭐

CSS selectors and keyframes for animations

⏱️ 10 min 🏷️ css, keyframes, animations, transforms 
/* 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;
  }
}

📝 Pseudo-classes and Pseudo-elements css

🟡 intermediate ⭐⭐

CSS selectors with various pseudo-classes and pseudo-elements

⏱️ 12 min 🏷️ css, pseudo-classes, pseudo-elements, advanced 
/* 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";
}

📝 Attribute Selectors css

🟡 intermediate ⭐⭐

CSS selectors using various attribute matching patterns

⏱️ 12 min 🏷️ css, attributes, selectors, advanced 
/* 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;
}

📝 Nested SCSS-like Selectors css

🔴 complex ⭐⭐⭐

CSS with nested selectors similar to SCSS/LESS preprocessing

⏱️ 15 min 🏷️ css, nested, scss, less, preprocessors 
/* 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;
}