CSS Seciciler

-

/**
[] Nitelik Secicileri [] köşeli parantezden olusur
: sözde sınıf secicileri : ikiNokta üst üste den olusur
:: sözde elemanlar ise  :: iki tane ikiNokta üst üste olusur


**/


/*
*{
evrensel secici tüm nesneleri secer
color:red;
}


div *{
div içersindeki tüm nesneleri secer
color:red;
}
*/

/*
#test {
id si test olan nesneyi secer tekil secici
color:red;
}

div#test {
div içindeki id si test olan nesneyi secer
color:red;
}
*/


/*
.test{
sınıf  secici class ismi test olan tüm nesneleri secer
color:red;
}

div.test{
div içerisinde class ismi test olanları secer
color:red;
}
*/


/*
x y {
x y torun secici
}

ul li {
color:blue;
}
*/

/*
x{
herhangi bir nesneyi secer
}
span {
color:blue;
}
*/



/*

a:link {
a ziyaret edilmemiş ler için
background-color:pink;
}

a:visited {

ziyaret edilmis linklerin  secilmesi için
}
*/



/*
x + y {

 x nesnelerinden sonra gelen y nesnelerini  secmek için kullanılır
}

x.cName + y {

class ismi cName olan  x nesnelerinden sonra gelen y nesnelerini  secmek için kullanılır
}
*/



/*

x > y {

x nesnesi içinde ki cocuk olan nesneleri secer  secici
}

div > div {

color:red;
}
div.cName > div {
class name i cName olan nesnelerin div cocugunu secer
color:red;
}


*/


/*
x ~ y {

x nesnesinden sonra gelen bütünnn ebeveyn olannnnn y nesnelerini secmek için kullanılır
y nesnesi herhangi bir nesnenin cocuüu durumuna düş müş ise secmez
}

div ~ p {

color : red;
}

*/



/*
x [y]  {

Nitelik Secicisi
x nesnesinin y niteliği var ise onları secer
}

a [title]  {

a nesnesinin title özelliği var ise onlalrı secer
color:red;*
}

*/


/*
x [y='z']  {

Nitelik Secicisi
x nesnesinin "y" niteliği "z" ye eşit  onları secer
}

a [title="test"]  {
a nesnesinin title özelliği "text" onlalrı secer
color:red;*
}

*/


/**
x [y*='z']  {
Nitelik Secicisi
x nesnesinin "y" niteliğinde  "z" geçenleri secer
y="..z.."  olsada secer
}

a [title*="test"]  {
"a" nesnesinin "title" özelliğinde "text" gecenleri secer
color:red;*
}

**/


/**
x [y*='zxxx']  {
Nitelik Secicisi
x nesnesinin "y" niteliğinde  "z" ile başlayanları secer
y="z.."  olursa secer
}

a [title^="test"]  {
"a" nesnesinin "title" özelliğinde "text" ile başlayan ları secer
color:red;*
}

**/


/**
x [y*='xxxz']  {
Nitelik Secicisi
x nesnesinin "y" niteliğinde  "z" ile biten secer
y="...z"  olursa secer
}

a [title^="xxxtest"]  {
"a" nesnesinin "title" özelliğinde "text" ile biten ları secer
color:red;*
}

**/


/**
x [y~='xxx z']  {
Nitelik Secicisi
x nesnesinin "y" niteliğinde  "z" olan veya içersinde z ayrı olarak ( bitişik yazılmadan varsa ) yer alan   secer
y="... z"  olursa secer
y="... z .."  olursa secer
y="z ...."  olursa secer
}

a [title~="test"]  {
"a" nesnesinin "title" özelliğinde "text" olan ları  ve test ifadesi bitişik yazılmamış ise secer
color:red;*
}

**/


/**
x:checked  {
sözde sınıf Secicisi
x nesnesi checked ise secer
}

input[type="checkbox"]:checked + label{
background-color:yellow;
}

**/


/**
x::before  {
sözde nesne Secicisi
x nesnesi öncesine biseyler eklememizisağlar
content:'eklenen yazı'
}

div::before{
content:'öncesine eklenen yazı';
}

x::after  {
sözde eleman nesne Secicisi
x nesnesi checked ise secer
}
div::after{
content:'sonrasına eklenen yazı';
}

**/


/**
x:hover  {
sözde sınıf Secicisi
x nesnesi mause üzerine geldiğinde ise secer
}

a:hover  {
background-color:red;
}

**/


/**
x:not(y)  {
sözde sınıf Secicisi
x nesnesi  y değilse secer
}

div:not(.cName)  {
background-color:red;
}

div:not(:hover)  {
background-color:red;
}

**/



/**
x::first-letter{
sözde nesne Secicisi
x nesnesi içindeki ilk cümleyi secer ve ona işlem yapar
font-size:40px;
}

div::first-letter{
font-size:40px;

x::first-line{
sözde nesne Secicisi
x nesnesi içindeki ilk satır secer ve ona işlem yapar
font-size:40px;
}

div::first-line{
font-size:40px;
}

**/



/**
x:nth-child(n) {  cocuk olan x nesnesini baştan n. yi seç
sözde sınıf Secicisi
x nesnesi içersinde  n. yi  secer
}

div:nth-child(3) {
background-color:red;
}

div p:nth-child(3) { div içindeki p lerden baştan  3. olanı sec
background-color:red;
}

**/



/**
x:nth-last-child(n) {  cocuk olan x nesnesini sondan n. yi x ise seç
sözde sınıf Secicisi
x nesnesi içersinde  n. yi  secer
}

div:nth-last-child(3) {
background-color:red;
}

div p:nth-last-child(3) { div içindeki p lerden sondan 3. olanı p ise sec
background-color:red;
}

**/


/**
nth-of--last-type  last olursa sondan demek
x:nth-of-type(n) {  cocuk olan x nesnesini baştan n.  x i bul seç
sözde sınıf Secicisi
x nesnesi içersinde  n. yi  secer
}

div:nth-of-type(3) {
background-color:red;
}

div p:nth-of-type(3) { div içindeki p lerden baştan  3. p yi bul onu  sec
background-color:red;
}

**/



/**
x:only-child{
x child ise sec
}

div p:only-child{ divler içerisinde sadece 1 eleman var sa oda p ise sec
background-color:red;
}

**/



/**
x:only-of-type{
x nesnesi tekbaşına child ise seçer  (kardeşi yoksa)
}

div p:only-of-type{ div içinde ki tek cocuk olan p leri secer
background-color:red;
}

**/


/**
x:first-child{
 ilk çocuk nesnesi   x olanları  seçer  (x cocuk olmalı)
 ilk cocuk x deilse secmezzzzzz  type dan farkı
}

div p:first-child{ div içinde ki ilk cocuk p leri secer
background-color:red;
}

x:last-child{
 son çocuk nesnesi  x olanları  seçer  (x cocuk olmalı)
}

div p:last-child{ div içinde ki son cocuk p leri secer
background-color:red;
}
**/


/**
x:first-of-type{
 ilk çocuk nesnesini bulur  x olanları  seçer  (x cocuk olmalı)
}

div p:first-of-type{ div içinde ki ilk cocuk p leri secer
background-color:red;
}

x:last-of-type{
 son çocuk nesnesi  x olanları  seçer  (x cocuk olmalı)
}

div p:last-of-type{ div içinde ki son cocuk p leri secer
background-color:red;
}
**/


/***

x:focus{
odaklanılan x nesnesini secip işlem yapar
}

input:focus{
background-color:yellow;
}

***/


/***
x:active{
aktif olan x nesnesini secip işlem yapar
}

a:active +p{
background-color:yellow;
}
***/



/***

x:lang(y){
x nesnesindeki lang parametresi  y olan  nesneyi secip işlem yapar
}

p:lang(lName){
lag='lName'  olanları secer
background-color:yellow;
}

***/

/***
:root{
koknesneyi secer
}

:root{
background-color:yellow;
}

html{
aynı şey :D:D:
}
***/


/***
x:empty{
x nesnesinin içi boş ise  secip işlem yapar
}

p:empty{
background-color:yellow;
}
***/

/***
x:target{
x nesnesinin içi boş ise  secip işlem yapar
}

p:target{
background-color:yellow;
}
p:target{

background-color:yellow;
display:block;
}
***/



/***
x:enabled{
x nesnesi enabled ise  secip işlem yapar
}

input:enabled{
border: 3px solid red;
background-color:yellow;
}

x:disabled{
x  nesnesi disabled ise  secip işlem yapar
}

input:disabled{
border: 3px solid red;
background-color:yellow;
}
***/






/*****
x:valid{
x nesnesi enabled ise  secip işlem yapar
}

input:valid{
border: 3px solid red;
background-color:yellow;
}

x:invalid{
x  nesnesi disabled ise  secip işlem yapar
}

input:invalid{
border: 3px solid red;
background-color:yellow;
}
***/



/*****
x::selection{
secilen ifadenin  arkaplan ve yazı da kullanılmıs baska yok sanırım
salla secip işlem yapar
}

p::selection{
border: 3px solid red;
background-color:yellow;
}
::selection{

background-color:yellow;
color:red;
}
Mozillada
::-moz-selection{

background-color:yellow;
color:red;
}
***/

Tayfun Erbilen hakkıyla anlatmıştır ordan izlemeniz tavsiye ederim saygılar..
erbilen.net


Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Bir Yazılımcının karşılaşabileceği Mülakat Soruları Karşılaştıklarım

-
Merhabalar, iş görüşmelerimle ilgili deneyimlerimi ve edindiğim gözlemleri paylaşmak ve bilgi edinmeniz adina gördüklerimi ve bazı fikirlerimi sizlerle paylaşmak isterim çünkü bu konuda gercekten sağlam bi yazıyla karsılasmadım bu isin duayeni olanlar bile bişey yazmıyor ya da ben karsılasmadım herneyse benim yazacaklarımda mükemmel deil sonuçta :) arkadaşlar iş görüşmeleri maximum 1 saat sürse 1 saatte ki bu süre çok daha az. Bu süre içersinde Bir insana kendinizi tanıtmanız gerekiyor burda aslında ilk olarak kılık kıyafet saç sakal vs gibi dış görünüş her ne kadar bir çok kisi yok benim için önemli değil deseniz bile ben şahsen çok yaşadım denedim yok gerçekten önem verilir  mantıken düşündüğünüzde zaten ne kadar mantıklı olduğunu anlarsınız her neyse tavsiyem şu ki iş görüşmesine gideceğinizde mutlaka ama mutlaka takım elbise veya takım elbiseye çok yakın elbiseler giyiniz  sanki her zaman takım giyiyormuş gibi davranın inanın bu işin %50 sini halletiniz demektir. ...
Devam»

[Java] Append Nedir

-
Append String yada nesne birleştirme komutu dur burada String birlestirme gosterilmistir  nesne birlestirmede de kullanılır sonucta String te bir nesne olduguna gore ;) peki   String  s1,s2,s3; s3='Mehmet' s2='Özdemir'; s1='Java'; dersek s3=s3+s2+s1;  bu islemin sonuu Mehmet Özdemir Java s3.append(s2); s3.append(s1);  sonucunda   Mehmet Özdemir Java dır ve aynıdır farkı nedir dicek olursak üstteki her bir toplama işlemi için bellekte farklı nir olan oluşturulurken Append komutu kullanırsak bellekte her bir ekleme için farklı yer oluşturulmaz böylelikle bellek boşyere kullanılmaz şişmez ne olcak yaw oluştursun derseniz örneğin  milyon kere bu işlemi yaptıgımızı düşünürsek ozaman önemini anlarız teşekkürler   // içersinde XxxDTO Class nesnelerin bulunan bir listenin request olarak geldiğini varsayalım                                      ...
Devam»

WebSocket Nedir?

-
WebSocket Nedir? KAYNAK:https://kodcu.com/2016/11/websocket-nedir-2/ KAYNAK:https://kodcu.com/2016/11/websocket-nedir-2/ KAYNAK:https://kodcu.com/2016/11/websocket-nedir-2/ https://yazilimgunlugu.org/yeni-protokoller-web-sockets-nedir/ https://yazilimgunlugu.org/yeni-protokoller-web-sockets-nedir/ HTTP stateless request/response protokolüdür. Http protokülünün bu yapısı çok fazla etkileşim içerisinde olan web uygulamaları için uygun değildir. HTTP 1.1’den önce her request servera yeni bir connection yaratılırdı. HTTP 1.1 ile birlikte birden çok request/response çifti için tek bir tcp connection’ı kullanılabilir hale geldi. Bu yeni yapı http-keep alive ya da http persistent connection olarak adlandırılır. Http half duplex,tek yönlü bir protokoldür.Yani request’in yönü server’dan client’a doğrudur. Server’da bir değişiklik olduğunda server bunu client’a bildiremez. Bu değişikliği algılayabilmek için polling, long polling ya da websocket  gibi yapılar kullanılır. P...
Devam»