انتخابگرهای برادر و خواهر CSS3
انتخاب هاي خواهر و برادر يك امكان جديد در css3 است كه مي توانيد كنترل بيشتري روي تگ هاي html در طراحی وب سایت داشته باشيد.
div+p
{
background-color:yellow;
}
اولين تگ p را پس از div انتخاب ميكند.
p~ul
{
background:#ff0000;
}
تمام تگ هاي ul كه پس تگ p قرار داردند را انتخاب مي كند.
به عنوان مثال:
html
<input type="checkbox" id="toggle">
<label for="toggle">☰</label>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
css
input {
display: none;
}
label {
background: #f5f5f5;
background: linear-gradient(#fff, #eee);
border: 1px solid #ccc;
border-radius: 6px;
cursor: pointer;
}
label:hover {
color: #f7941d;
}
input:checked + label {
background: #f5f5f5;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
color: #8c9198;
}
nav {
max-height: 0;
overflow: hidden;
transition: all .2s linear;
}
input:checked ~ nav {
max-height: 500px;
}
پيش نمايش
هیچ نظری موجود نیست:
ارسال یک نظر