🎯 Exemples recommandés

Balanced sample collections from various categories for you to explore

← Retour aux outils ← Retour aux exemples

Exemples de Sélecteurs CSS

Collection d'exemples de sélecteurs CSS pour les tests d'extraction et d'analyse

Key Facts

Category
Developer Tools
Items
8
Format Families
text

Sample Overview

Collection d'exemples de sélecteurs CSS pour les tests d'extraction et d'analyse This sample set belongs to Developer Tools and can be used to test related workflows inside Elysia Tools.

📝 Sélecteurs de Classe de Base css

🟢 simple ⭐

Sélecteurs de classe CSS simples y compris individuels, multiples et chaînés

⏱️ 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; }

📝 Sélecteurs d'ID css

🟢 simple ⭐

Sélecteurs d'ID CSS y compris individuels et combinés avec des 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;
}

📝 Sélecteurs Combinés css

🟡 intermediate ⭐⭐

Sélecteurs CSS complexes combinant classes, ID, éléments et 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;
}

📝 Sélecteurs de Media Queries css

🟡 intermediate ⭐⭐

Sélecteurs CSS dans les @media queries pour le design responsive

⏱️ 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;
  }
}

📝 Sélecteurs d'Animation d'Images Clés css

🟡 intermediate ⭐⭐

Sélecteurs CSS et images clés pour les 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 et Pseudo-éléments css

🟡 intermediate ⭐⭐

Sélecteurs CSS avec diverses pseudo-classes et pseudo-éléments

⏱️ 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";
}

📝 Sélecteurs d'Attribut css

🟡 intermediate ⭐⭐

Sélecteurs CSS utilisant divers modèles de correspondance d'attributs

⏱️ 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;
}

📝 Sélecteurs Imbriqués type SCSS css

🔴 complex ⭐⭐⭐

CSS avec des sélecteurs imbriqués similaires au prétraitement SCSS/LESS

⏱️ 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;
}