Contenu principal
.main-nav a a.active article.featured article p:first-of-type li:nth-child(even)
Classement : p < .text < p.text < #main < #main .text p
Si deux règles ont la même spécificité : la dernière règle gagne
Pourquoi éviter !important : crée des conflits CSS et casse la logique
.box {
width: 300px;
padding: 20px;
border: 5px solid #333;
margin: 15px;
}
content-box= width + padding +border= 350px
border-box= width= 300px
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.navbar { display: flex; justify-content: space-between; align-items: center; background-color: #d6b7b7; }
.nav-links { display: flex; list-style: none; }
.nav-links li { margin-left: 20px; }
.nav-links a { color: white; text-decoration: none; }
.cards { display: flex; gap: 20px; }
.card { flex: 1; display: flex; flex-direction: column; }
.card-link { margin-top: auto; }
.grid-cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.page-layout { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; gap: 10px; height: 400px; }
/* Base mobile */
.container {
width: 100%;
padding: 15px;
}
.nav-menu {
display: flex;
flex-direction: column;
gap: 5px;
}
.content {
display: block;
}
.sidebar-hidden {
display: none;
}
/* Tablette */
@media (min-width: 768px) {
.nav-menu {
flex-direction: row;
gap: 10px;
}
.content {
display: flex;
gap: 20px;
}
.sidebar-hidden {
display: block;
width: 200px;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
.nav-menu {
gap: 20px;
}
.sidebar-hidden {
width: 250px;
}
}
:root { --bg-color: #fff0f5; --text-color: #000; }
body.dark-theme { --bg-color: #000; --text-color: #fff; }
body { background-color: var(--bg-color); color: var(--text-color); }
button { background-color: #ffb6c1; transition: background-color 0.3s, transform 0.3s; }
button:hover { background-color: #ff69b4; transform: scale(1.1); }
.spinner { border: 4px solid #ffe4e1; border-top: 4px solid #ff69b4; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }