tarihinde Fatih Hayrioğlu

Daha önce CSS3 seçicileri kısmında biraz anlattım. Burada biraz daha detay bilgi vereceğim.

:last-child seçicisi bir html seçicisi ile birilikte çalışıyor. Yani HTML’de p, h3, li gibi html seçicileri kullanmalıyız.

ul li:last-child a{
    border-right:none;
}

peki biz bunu farklı elemanlar için kullanbilirmiyiz? Evet

Evrensel seçici(*) ile sorunumuzu çözdük.

Bunun dışında belli bir sınıf tanımı yapılarakta bir çözüm oluşturulabilir.

Ancak bu sınıflı çözümün bir sorunu var. Eğer son elemandan sonra bir eleman daha var ise seçim yapılmıyor ve sorun oluyor.

tarihinde Fatih Hayrioğlu

CSS’in güzelliklerinden birisi seçicilerinin gücüdür. Ben burada bunlardan birinin ipucunu göstermek istiyorum.

Normalde bir iş yaparken aradan bir elemanın o atamanın dışında kalması için :not seçicisini kullanıyoruz.

Peki birden fazla değil seçicisi kullanabilirmiyiz ve nasıl?

Evet kullanabiliriz işte örnek

Kaynak

tarihinde Fatih Hayrioğlu

Bu özellikler blok-level ve yerine konulabilir element(örneğin resim) içerik alanının asgari / azami genişliğini tanımlar. max-width margin, padding ve kenarlıkları içermez.

width değeri daha geniş olsa bile max-width değerini aşamaz. Bu ilginç bir kuraldır. Ancak min-width değeri eğer max-width değerinden büyükse bu değeri uygular, yani min-width değeri baskındır.

min-width ve min-height element genişliğinin belirli bir aralıkta olması için beraber kullanılır.

max-width ve width ilişkisi

max-width ve width aynı elemente ayı değerlerde uygulanmamalıdır, birisi diğerine baskın olur. Örneğin width değeri 150px ve max-width değeri 60px olarak atanmışsa

.alan{
    max-width: 60px;
    width:150px;
}

Tanımında width tanımı anlamsız kalır. Şöyle bir kullanım ise mantıklıdır.

.alan{
    max-width: 120px;
    width:80%;
}

Genişliği en fazla 120px olan bir elemanımız var. Elemanımızın genişliği kapsayıcı elemanın % 80’i kadardır.

## Uyumlu(Responsive) resim ve max-width

Esnek bir resim boyutu sağlamak için max-width değerini %100 ve height:auto tanımlamak gerekir.

img {
    max-width: 100%;
    height: auto;
}

kodu tüm uyumlu web kodlarında mevcuttur.

min-width ipucu

Mesela bir site genişliğini yüzde olarak vermek istiyoruz ama belli genişlikten daha küçük olması durumunda içeriğin büzülmesini istemiyoruz.

.ana-kapsayici {
    width:90%;
    min-width:600px;
}

tanımı bu işimizi görür. Zamanında bunun için javascript kodu yazardık. Hey gidi günler.

Uyumlu web kodlarken max-width özelliğinin çok kullanışlı tarafından yararlanıyoruz.

## Kaynaklar