CSS-те тегтерді таңдау жолдары (выборка)

CSS- те тегтерді таңдау жолдарының өзім білетін түрлерін жазып көрсетпекшімін ))

Мысал ретінде келесі кодтты қарастырайық:


<div>
<input type="text" id="aidi_1234" class="11_klass_11" alt="tttexttt tt ss" />
</div>
</div>


енді осы input қа CSS арқылы таңдау түрлерін қысқаша көрсетіп кетейін

id арқылы (идентификатор)

#aidi_1234 {
мында стильдерді жазамыз
}


сlass арқылы

.11_klass_11 {
мында стильдерді жазамыз
}


тікелей тег арқылы

input { // былай таңдасақ кодттағы барлық input таңдалады
мында стильдерді жазамыз
}


тегтің ішіндегі тег арқылы

div input { //былай таңдасақ кодттағы div ішіндегі барлық input таңдалады
мында стильдерді жазамыз
}


атрибут арқылы таңдау

[alt] { //былай таңдасақ кодттағы alt атрибуты бар барлық тег таңдалады
мында стильдерді жазамыз
}


тегтегі атрибут арқылы таңдау

input[alt] { //былай таңдасақ кодттағы alt атрибуты бар барлық input таңдалады
мында стильдерді жазамыз
}


атрибут мәні арқылы

input[class="11_klass_11"] { //былай таңдасақ кодттағы class атрибутының мәні 11_klass_11 болатын бар барлық input таңдалады
мында стильдерді жазамыз
}


атрибут мәні арқылы

*=


input[alt*="text"] { //былай таңдасақ кодттағы alt атрибутының мәнінің ішінде text сөзі кездесетін барлық input таңдалады
мында стильдерді жазамыз
}


атрибут мәні арқылы

^=


input[class^="11_"] { //былай таңдасақ кодттағы class атрибутының мәніні 11_ сөзінен басталатын барлық input таңдалады
мында стильдерді жазамыз
}


атрибут мәні арқылы

$=


input[class$="_11"] { //былай таңдасақ кодттағы class атрибутының мәніні _11 сөзінен аяқталатын барлық input таңдалады
мында стильдерді жазамыз
}


атрибут мәні арқылы

~=


input[alt~="tt"] { //былай таңдасақ кодттағы alt атрибутының мәнініде бос орын арасында tt сөзі бар барлық input таңдалады
мында стильдерді жазамыз
}


және соңғысы

|=


оған арнайы код қарастырайық
<input type="text" id="aidi_1234" class="11_klass_11" alt="tttexttt-tt-ss" />
input[alt|="tt"] { //былай таңдасақ кодттағы alt атрибутының мәнініде дефис аралығында tt сөзі бар барлық input таңдалады
мында стильдерді жазамыз
}


мен білетіндер осы. бұдан да басқасы бар болуы мүмкін )) (псевдокласс арқылы таңдаумен шатастырмаңыздар)

бооолды, осы білгендеріңмен эксперимент жасай беріңіздер )) екі үш таңдауды қатар қолдануға болады мысалы:


input[alt~="tt"][class^="11_"] { //былай таңдасақ кодттағы alt атрибутының мәнініде Бос орын аралығында tt сөзі бар және class атрибуты 11_ сөзінен басталатын барлық input таңдалады
мында стильдерді жазамыз
}

6 пікір

Korkem
керемет жазылған, бірақ мен түк ұқпайм....((
yerbol89
Сайт жасаушыларға сайттың сырт келбетін әрлегенде тамаша ақпарат. :)
yerbol89
Абылай жақсы пост. Өте қажетті екен!
dimash
Жақсы жазған, өте керемет дей берейін, өкінішті, мен де түк түсінбедім… програмисттердің өздернің түсінетіні шығар, ондай ондай әр мамандықта болатын сияқты. Білетіндер қажет деп жатсы, шынында қажет болғын да, +1)))
Abylai
=( түсініксіз жазылған ба? қайта жазып шығайын ба дұрыстап? қай жеіріне түсінбедіңдер?
konvict
Не ғо, мен xawgim болғандықтан ұқпадым. Сонда да айтарым шыққан қортындыны суретке түсіріп пе осында салсаң. Сонда кішкене ұғынықты болар еді
Тек тіркелген қолданушылар ғана пікір қалдыра алады.