• Gündem
  • Alışveriş
  • Finans
  • YaCevap
  • Video
  • Görsel
  • Ana Sayfa
  • Teknoloji
  • Psikoloji ve İlişkiler
  • Bilim ve Eğitim
  • Yemek
  • Kültür ve Sanat
  • Filmler ve Diziler
  • Ekonomi ve Finans
  • Oyun
  • Spor
  • Güzellik ve Moda
  • Faydalı İpuçları
  • Otomobil
  • Hukuk
  • Seyahat
  • Hayvanlar ve doğa
  • Sağlık
  • Diğer
  • Buradasın
    • Cevap ›
    • Teknoloji ›

    2 tane class aynı anda nasıl kullanılır?

    • #Teknoloji
    • #HTML
    • #CSS
    • #Programlama

    Yazeka

    Arama sonuçlarına göre oluşturuldu

    İki tane class aynı anda bir HTML elementinde kullanmak için, class özelliğini birden fazla class ismi ile ayırmak gereklidir 12.
    Örnek kullanım: 
    <div class="social first"></div>
    2.
    5 kaynaktan alınan bilgiyle göre:

      Yanıtı değerlendir

      5 kaynak

      1. academy.patika.dev
        1
      2. stackoverflow.com
        2
      3. css-tricks.com
        3
      4. medium.com
        4
      5. technoprogram.com
        5

    • Class isimleri nasıl optimize edilir?

    • Birden fazla class kullanmanın avantajları nelerdir?

    • CSS ile class kullanımı nasıl yapılır?

    • Daha fazla bilgi

    Konuyla ilgili materyaller

    ID ve class arasında hangisi daha önceliklidir?

    ID, class'a göre daha önceliklidir. Bu öncelik, tarayıcı tarafından CSS kurallarının uygulanmasında belirlenir ve aşağıdaki sıraya göre işler: 1. ID: Bir web sayfasında sadece bir element için stil kuralları tanımlar ve bu nedenle benzersizdir. 2. Class: Birden fazla elemente aynı stilin uygulanmasını sağlar, dolayısıyla daha genel bir kullanım alanına sahiptir.
    • #Teknoloji
    • #WebGeliştirme
    • #CSS
    • #HTML
    5 kaynak

    ID ve Class aynı anda nasıl kullanılır?

    ID ve Class aynı anda bir HTML elementinde kullanılabilir. Örnek kullanım: ```html <h4 class="h-blue thick" id="main-title">Başlık</h4> ``` Bu örnekte, `h-blue` ve `thick` sınıflarının yanı sıra `main-title` ID'si de belirtilmiştir.
    • #Teknoloji
    • #HTML
    • #ID
    • #WebGeliştirme
    5 kaynak
  • Yazeka nedir?
Seçili sitelerdeki metinlere göre Yazeka tarafından oluşturulan yanıtlardır. Hatalar içerebilir. Önemli bilgileri kontrol ediniz.
  • © 2025 Yandex
  • Gizlilik politikası
  • Kullanıcı sözleşmesi
  • Hata bildir
  • Şirket hakkında
{"8opu0":{"state":{"logoProps":{"url":"https://yandex.com.tr"},"formProps":{"action":"https://yandex.com.tr/search","searchLabel":"Bul"},"services":{"activeItemId":"answers","items":[{"url":"https://yandex.com.tr/gundem","title":"Gündem","id":"agenda"},{"url":"https://yandex.com.tr/shopping","title":"Alışveriş","id":"shopping"},{"url":"https://yandex.com.tr/finance","title":"Finans","id":"finance"},{"url":"https://yandex.com.tr/yacevap","title":"YaCevap","id":"answers"},{"url":"https://yandex.com.tr/video/search?text=popüler+videolar","title":"Video","id":"video"},{"url":"https://yandex.com.tr/gorsel","title":"Görsel","id":"images"}]},"userProps":{"loggedIn":false,"ariaLabel":"Menü","plus":false,"birthdayHat":false,"child":false,"isBirthdayUserId":true,"className":"PortalHeader-User"},"userIdProps":{"flag":"skin","lang":"tr","host":"yandex.com.tr","project":"neurolib","queryParams":{"utm_source":"portal-neurolib"},"retpath":"https%3A%2F%2Fyandex.com.tr%2Fyacevap%2Fc%2Fteknoloji%2Fq%2F2-tane-class-ayni-anda-nasil-kullanilir-797120225%3Flr%3D213%26ncrnd%3D60388","tld":"com.tr"},"suggestProps":{"selectors":{"form":".HeaderForm","input":".HeaderForm-Input","submit":".HeaderForm-Submit","clear":".HeaderForm-Clear","layout":".HeaderForm-InputWrapper"},"suggestUrl":"https://yandex.com.tr/suggest/suggest-ya.cgi?show_experiment=222&show_experiment=224","deleteUrl":"https://yandex.com.tr/suggest-delete-text?srv=web&text_to_delete=","suggestPlaceholder":"Yapay zeka ile bul","platform":"desktop","hideKeyboardOnScroll":false,"additionalFormClasses":["mini-suggest_theme_tile","mini-suggest_overlay_tile","mini-suggest_expanding_yes","mini-suggest_prevent-empty_yes","mini-suggest_type-icon_yes","mini-suggest_personal_yes","mini-suggest_type-icon_yes","mini-suggest_rich_yes","mini-suggest_overlay_dark","mini-suggest_large_yes","mini-suggest_copy-fact_yes","mini-suggest_clipboard_yes","mini-suggest_turboapp_yes","mini-suggest_expanding_yes","mini-suggest_affix_yes","mini-suggest_carousel_yes","mini-suggest_traffic_yes","mini-suggest_re-request_yes","mini-suggest_source_yes","mini-suggest_favicon_yes","mini-suggest_more","mini-suggest_long-fact_yes","mini-suggest_hide-keyboard_yes","mini-suggest_clear-on-submit_yes","mini-suggest_focus-on-change_yes","mini-suggest_short-fact_yes","mini-suggest_app_yes","mini-suggest_grouping_yes","mini-suggest_entity-suggest_yes","mini-suggest_redesigned-navs_yes","mini-suggest_title-multiline_yes","mini-suggest_type-icon-wrapped_yes","mini-suggest_fulltext-highlight_yes","mini-suggest_fulltext-insert_yes","mini-suggest_lines_multi"],"counter":{"service":"neurolib_com_tr_desktop","url":"//yandex.ru/clck/jclck","timeout":300,"params":{"dtype":"stred","pid":"0","cid":"2873"}},"noSubmit":false,"formAction":"https://yandex.com.tr/search","tld":"com.tr","suggestParams":{"srv":"serp_com_tr_desktop","wiz":"TrWth","yu":"6574643181753490551","lr":213,"uil":"tr","fact":1,"v":4,"use_verified":1,"safeclick":1,"skip_clickdaemon_host":1,"rich_nav":1,"verified_nav":1,"rich_phone":1,"use_favicon":1,"nav_favicon":1,"mt_wizard":1,"history":1,"nav_text":1,"maybe_ads":1,"icon":1,"hl":1,"n":10,"portal":1,"platform":"desktop","mob":0,"extend_fw":1,"suggest_entity_desktop":"1","entity_enrichment":"1","entity_max_count":"5"},"disableWebSuggest":false},"context":{"query":"","reqid":"1753490561295590-11154991754359421895-balancer-l7leveler-kubr-yp-vla-247-BAL","lr":"213","aliceDeeplink":"{\"text\":\"\"}"},"baobab":{"parentNode":{"context":{"genInfo":{"prefix":"8opuw01-0-1"},"ui":"desktop","service":"neurolib","fast":{"name":"neuro_library","subtype":"header"}}}}},"type":"neuro_library","subtype":"header"},"8opu1":{"state":{"links":[{"id":"main","url":"/yacevap","title":"Ana Sayfa","target":"_self"},{"id":"technologies","url":"/yacevap/c/teknoloji","title":"Teknoloji","target":"_self"},{"id":"psychology-and-relationships","url":"/yacevap/c/psikoloji-ve-iliskiler","title":"Psikoloji ve İlişkiler","target":"_self"},{"id":"science-and-education","url":"/yacevap/c/bilim-ve-egitim","title":"Bilim ve Eğitim","target":"_self"},{"id":"food","url":"/yacevap/c/yemek","title":"Yemek","target":"_self"},{"id":"culture-and-art","url":"/yacevap/c/kultur-ve-sanat","title":"Kültür ve Sanat","target":"_self"},{"id":"tv-and-films","url":"/yacevap/c/filmler-ve-diziler","title":"Filmler ve Diziler","target":"_self"},{"id":"economics-and-finance","url":"/yacevap/c/ekonomi-ve-finans","title":"Ekonomi ve Finans","target":"_self"},{"id":"games","url":"/yacevap/c/oyun","title":"Oyun","target":"_self"},{"id":"sport","url":"/yacevap/c/spor","title":"Spor","target":"_self"},{"id":"beauty-and-style","url":"/yacevap/c/guzellik-ve-moda","title":"Güzellik ve Moda","target":"_self"},{"id":"useful-tips","url":"/yacevap/c/faydali-ipuclari","title":"Faydalı İpuçları","target":"_self"},{"id":"auto","url":"/yacevap/c/otomobil","title":"Otomobil","target":"_self"},{"id":"law","url":"/yacevap/c/hukuk","title":"Hukuk","target":"_self"},{"id":"travel","url":"/yacevap/c/seyahat","title":"Seyahat","target":"_self"},{"id":"animals-and-nature","url":"/yacevap/c/hayvanlar-ve-doga","title":"Hayvanlar ve doğa","target":"_self"},{"id":"health","url":"/yacevap/c/saglik","title":"Sağlık","target":"_self"},{"id":"other","url":"/yacevap/c/diger","title":"Diğer","target":"_self"}],"activeLinkId":"technologies","title":"Kategoriler","baobab":{"parentNode":{"context":{"genInfo":{"prefix":"8opuw02-0-1"},"ui":"desktop","service":"neurolib","fast":{"name":"neuro_library","subtype":"header-categories"}}}}},"type":"neuro_library","subtype":"header-categories"},"8opu2":{"state":{"tld":"com.tr","markdown":"**İki tane class aynı anda bir HTML elementinde kullanmak için**, class özelliğini birden fazla class ismi ile ayırmak gereklidir [```1```](https://academy.patika.dev/courses/css/css-ile-class-ve-id-kullanimi)[```2```](https://stackoverflow.com/questions/11918491/using-two-css-classes-on-one-element).\n\nÖrnek kullanım: `\u003cdiv class=\"social first\">\u003c/div>` [```2```](https://stackoverflow.com/questions/11918491/using-two-css-classes-on-one-element).","sources":[{"sourceId":1,"url":"https://academy.patika.dev/courses/css/css-ile-class-ve-id-kullanimi","title":"CSS ile Class ve ID Kullanımı Dersi | Patika.dev","shownUrl":"https://academy.patika.dev/courses/css/css-ile-class-ve-id-kullanimi"},{"sourceId":2,"url":"https://stackoverflow.com/questions/11918491/using-two-css-classes-on-one-element","title":"Class - Using Two CSS Classes on One... - Stack Overflow","shownUrl":"https://stackoverflow.com/questions/11918491/using-two-css-classes-on-one-element"},{"sourceId":3,"url":"https://css-tricks.com/multiple-class-id-selectors/","title":"Css-Tricks | Multiple Class Id Selectors","shownUrl":"https://css-tricks.com/multiple-class-id-selectors/"},{"sourceId":4,"url":"https://medium.com/s%C4%B1f%C4%B1rdan-i%CC%87leri-d%C3%BCzeye-java-e%C4%9Fitim-serisi/nesneye-y%C3%B6nelik-programlama-oop-be3094786889","title":"Nesneye Yönelik Programlama (OOP) | by Huseyin... | Medium","shownUrl":"https://medium.com/s%C4%B1f%C4%B1rdan-i%CC%87leri-d%C3%BCzeye-java-e%C4%9Fitim-serisi/nesneye-y%C3%B6nelik-programlama-oop-be3094786889"},{"sourceId":5,"url":"https://www.technoprogram.com/c-sinif-class-kavrami.html","title":"C# Sınıf (Class) Kavramı - C# Dersleri | Techno Program","shownUrl":"https://www.technoprogram.com/c-sinif-class-kavrami.html"}],"isHermione":false,"headerProps":{"header":"2 tane class aynı anda nasıl kullanılır?","homeUrl":"/yacevap","categoryUrl":"/yacevap/c/teknoloji","categoryTitle":"Teknoloji","canUseNativeShare":false,"extralinksItems":[{"variant":"reportFeedback","reportFeedback":{"feature":"YazekaAnswers","title":"Bu yanıtta yanlış olan ne?","checkBoxLabels":[{"value":"Uygunsuz veya aşağılayıcı yanıt"},{"value":"Soruma yanıt verilmedi"},{"value":"Bilgi hataları var"},{"value":"Bilgi yetersiz"},{"value":"Bilgi güncel değil"},{"value":"Görüntüleme hataları"},{"value":"Yanıtta kullanılan kaynaklar güvenilir değil"},{"value":"Bu soru için yanıt gerekmiyor"},{"value":"Diğer"}]}}],"tags":[{"href":"/yacevap/t/teknoloji","text":"#Teknoloji"},{"href":"/yacevap/t/html","text":"#HTML"},{"href":"/yacevap/t/css","text":"#CSS"},{"href":"/yacevap/t/programlama","text":"#Programlama"}]},"suggestProps":{"suggestItems":[{"id":0,"text":"Class isimleri nasıl optimize edilir?","url":"/search?text=Class+isimleri+nas%C4%B1l+optimize+edilir%3F&promo=force_neuro"},{"id":1,"text":"Birden fazla class kullanmanın avantajları nelerdir?","url":"/search?text=Birden+fazla+class+kullanman%C4%B1n+avantajlar%C4%B1&promo=force_neuro"},{"id":2,"text":"CSS ile class kullanımı nasıl yapılır?","url":"/search?text=CSS+ile+class+kullan%C4%B1m%C4%B1&promo=force_neuro"},{"id":-1,"url":"/search?text=2+tane+class+ayn%C4%B1+anda+nas%C4%B1l+kullan%C4%B1l%C4%B1r%3F&promo=force_neuro","text":"Daha fazla bilgi"}]},"feedbackProps":{"feature":"YazekaAnswers","baseProps":{"metaFields":{"yandexuid":"6574643181753490551","reqid":"1753490561295590-11154991754359421895-balancer-l7leveler-kubr-yp-vla-247-BAL"}},"positiveCheckboxLabels":[{"value":"Yanıtı çok beğendim"},{"value":"Yanıtta gerekli bilgiler var"},{"value":"Kolay anlaşılır"},{"value":"Diğer"}],"negativeCheckboxLabels":[{"value":"Uygunsuz veya aşağılayıcı yanıt"},{"value":"Soruma yanıt verilmedi"},{"value":"Bilgi hataları var"},{"value":"Bilgi yetersiz"},{"value":"Bilgi güncel değil"},{"value":"Görüntüleme hataları"},{"value":"Yanıtta kullanılan kaynaklar güvenilir değil"},{"value":"Bu soru için yanıt gerekmiyor"},{"value":"Diğer"}]},"dialogStoreProps":{"baseUrl":"","baseUrlWs":""},"globalStoreProps":{"imageBackendUrl":"https://yandex.com.tr/images-apphost/image-download?cbird=171","query":"","retina":false,"avatarId":"0","isHermione":false,"isMacOS":false,"tld":"com.tr","isEmbeddedFuturis":false,"isLoggedIn":false,"brand":"yazeka","reqId":"1753490561295590-11154991754359421895-balancer-l7leveler-kubr-yp-vla-247-BAL","device":{"isIOS":false,"platform":"desktop"}},"baobab":{"parentNode":{"context":{"genInfo":{"prefix":"8opuw03-0-1"},"ui":"desktop","service":"neurolib","fast":{"name":"neuro_library","subtype":"question"}}}}},"type":"neuro_library","subtype":"question"},"8opu3":{"state":{"relatedMaterials":[{"favicons":["https://favicon.yandex.net/favicon/v2/https://juniortoexpert.com/tr/css-hiyerarsisi/?size=16&stub=1","https://favicon.yandex.net/favicon/v2/https://careerkarma.com/blog/css-class-vs-id-2/?size=16&stub=1","https://favicon.yandex.net/favicon/v2/https://www.ucuncubinyil.com/id-ve-class-secicilerinin-farki-web-gelistirmede-dogru-secici-kullanimi/?size=16&stub=1","https://favicon.yandex.net/favicon/v2/https://www.geeksforgeeks.org/difference-between-id-and-class-attributes-in-html/?size=16&stub=1","https://favicon.yandex.net/favicon/v2/https://matthewjamestaylor.com/id-vs-class?size=16&stub=1"],"href":"/yacevap/c/teknoloji/q/id-ve-class-arasinda-hangisi-daha-onceliklidir-2108853681","header":"ID ve class arasında hangisi daha önceliklidir?","teaser":"ID, class'a göre daha önceliklidir. Bu öncelik, tarayıcı tarafından CSS kurallarının uygulanmasında belirlenir ve aşağıdaki sıraya göre işler: 1. ID: Bir web sayfasında sadece bir element için stil kuralları tanımlar ve bu nedenle benzersizdir. 2. Class: Birden fazla elemente aynı stilin uygulanmasını sağlar, dolayısıyla daha genel bir kullanım alanına sahiptir.","tags":[{"href":"/yacevap/t/teknoloji","text":"#Teknoloji"},{"href":"/yacevap/t/webgelistirme","text":"#WebGeliştirme"},{"href":"/yacevap/t/css","text":"#CSS"},{"href":"/yacevap/t/html","text":"#HTML"}]},{"favicons":["https://favicon.yandex.net/favicon/v2/https://academy.patika.dev/courses/css/css-ile-class-ve-id-kullanimi?size=16&stub=1","https://favicon.yandex.net/favicon/v2/https://css.sitesi.web.tr/css-id-class.html?size=16&stub=1","https://favicon.yandex.net/favicon/v2/https://www.udacity.com/blog/2021/01/html-css-class-and-id-selectors-everything-you-need-to-know.html?size=16&stub=1","https://favicon.yandex.net/favicon/v2/https://css-tricks.com/the-difference-between-id-and-class/?size=16&stub=1","https://favicon.yandex.net/favicon/v2/https://prototurk.com/html/id-ve-class?size=16&stub=1"],"href":"/yacevap/c/teknoloji/q/id-ve-class-ayni-anda-nasil-kullanilir-1390829173","header":"ID ve Class aynı anda nasıl kullanılır?","teaser":"ID ve Class aynı anda bir HTML elementinde kullanılabilir. Örnek kullanım: ```html \u003ch4 class=\"h-blue thick\" id=\"main-title\">Başlık\u003c/h4> ``` Bu örnekte, `h-blue` ve `thick` sınıflarının yanı sıra `main-title` ID'si de belirtilmiştir.","tags":[{"href":"/yacevap/t/teknoloji","text":"#Teknoloji"},{"href":"/yacevap/t/html","text":"#HTML"},{"href":"/yacevap/t/id","text":"#ID"},{"href":"/yacevap/t/webgelistirme","text":"#WebGeliştirme"}]}],"baobab":{"parentNode":{"context":{"genInfo":{"prefix":"8opuw04-0-1"},"ui":"desktop","service":"neurolib","fast":{"name":"neuro_library","subtype":"related"}}}}},"type":"neuro_library","subtype":"related"},"8opu4":{"state":{"tld":"com.tr","isIos":false,"isQuestionPage":true,"baobab":{"parentNode":{"context":{"genInfo":{"prefix":"8opuw05-0-1"},"ui":"desktop","service":"neurolib","fast":{"name":"neuro_library","subtype":"ask_question"}}}}},"type":"neuro_library","subtype":"ask_question"},"8opu5":{"state":{"generalLinks":[{"id":"privacy-policy","text":"Gizlilik politikası","url":"https://yandex.com.tr/legal/privacy_policy/"},{"id":"terms-of-service","text":"Kullanıcı sözleşmesi","url":"https://yandex.com.tr/legal/tos/"},{"id":"report-error","text":"Hata bildir","url":"https://forms.yandex.com.tr/surveys/13748122.01a6645a1ef15703c9b82a7b6c521932ddc0e3f7/"},{"id":"about-company","text":"Şirket hakkında","url":"https://yandex.com.tr/project/portal/contacts/"}],"copyright":{"url":"https://yandex.com.tr","currentYear":2025},"socialLinks":[{"type":"tiktok","url":"https://redirect.appmetrica.yandex.com/serve/677728751613663494","title":"TikTok"},{"url":"https://redirect.appmetrica.yandex.com/serve/173325632992778150","type":"youtube","title":"Youtube"},{"url":"https://redirect.appmetrica.yandex.com/serve/677728793472889615","type":"facebook","title":"Facebook"},{"url":"https://redirect.appmetrica.yandex.com/serve/1182131906657966033","type":"instagram","title":"Instagram"},{"url":"https://redirect.appmetrica.yandex.com/serve/893945194569821080","type":"x","title":"X"}],"categoriesLink":[],"disclaimer":"Seçili sitelerdeki metinlere göre Yazeka tarafından oluşturulan yanıtlardır. Hatalar içerebilir. Önemli bilgileri kontrol ediniz.","baobab":{"parentNode":{"context":{"genInfo":{"prefix":"8opuw06-0-1"},"ui":"desktop","service":"neurolib","fast":{"name":"neuro_library","subtype":"footer"}}}}},"type":"neuro_library","subtype":"footer"}}