CSS Seçiciler
Tüm CSS seçicileri için hızlı başvuru
Basic Selectors
| Selector | Description | Example |
|---|---|---|
*
|
Universal selector — matches every element | * { box-sizing: border-box; } |
div
|
Type selector — matches all elements of a given tag name | p { color: #333; } |
.class
|
Class selector — matches elements with this class attribute | .btn { padding: 8px 16px; } |
#id
|
ID selector — matches the element with this unique id | #header { height: 60px; } |
.class1.class2
|
Multiple classes — matches elements having both classes | .btn.btn-primary { background: blue; } |
div, p, span
|
Selector list (group) — matches any element in the list | h1, h2, h3 { font-family: sans-serif; } |
div.class
|
Type + class — matches div elements with this class | a.active { font-weight: bold; } |
div#id
|
Type + ID — matches div element with this specific ID | section#main { max-width: 1200px; } |
:root
|
Matches the root element (html in HTML documents) | :root { --primary: #007bff; } |
html
|
Matches the top-level html element | html { font-size: 16px; } |
Combinators
| Selector | Description | Example |
|---|---|---|
A B
|
Descendant combinator — B anywhere inside A | nav a { color: white; } |
A > B
|
Child combinator — B that is a direct child of A | ul > li { list-style: disc; } |
A + B
|
Adjacent sibling combinator — B immediately after A | h1 + p { margin-top: 0; } |
A ~ B
|
General sibling combinator — all B siblings after A | h2 ~ p { color: #666; } |
A || B
|
Column combinator — B within a table column A (CSS Grid Level 1) | col.selected || td { background: yellow; } |
Pseudo-classes
| Selector | Description | Example |
|---|---|---|
:hover
|
Matches when the user hovers the mouse over the element | a:hover { text-decoration: underline; } |
:focus
|
Matches when the element is focused (keyboard/click) | input:focus { outline: 2px solid blue; } |
:focus-visible
|
Matches focus only when it should be visually indicated | button:focus-visible { outline: 3px solid orange; } |
:active
|
Matches when the element is being activated (clicked) | button:active { transform: scale(0.98); } |
:visited
|
Matches anchor links that have been visited | a:visited { color: purple; } |
:link
|
Matches unvisited anchor links | a:link { color: blue; } |
:checked
|
Matches checked checkboxes, radio buttons, or options | input:checked + label { font-weight: bold; } |
:disabled
|
Matches form elements that are disabled | input:disabled { opacity: 0.5; } |
:enabled
|
Matches form elements that are enabled | input:enabled { border-color: #ccc; } |
:required
|
Matches form elements with the required attribute | input:required { border-left: 3px solid red; } |
:optional
|
Matches form elements without the required attribute | input:optional { border-color: #eee; } |
:valid
|
Matches form elements whose value is valid | input:valid { border-color: green; } |
:invalid
|
Matches form elements whose value is invalid | input:invalid { border-color: red; } |
:placeholder-shown
|
Matches an input element displaying placeholder text | input:placeholder-shown { font-style: italic; } |
:first-child
|
Matches an element that is the first child of its parent | li:first-child { border-top: none; } |
:last-child
|
Matches an element that is the last child of its parent | li:last-child { margin-bottom: 0; } |
:nth-child(n)
|
Matches elements based on their position among siblings | tr:nth-child(even) { background: #f5f5f5; } |
:nth-last-child(n)
|
Matches elements counting from the last sibling | li:nth-last-child(2) { color: red; } |
:first-of-type
|
Matches the first sibling of its type | p:first-of-type { font-size: 1.2em; } |
:last-of-type
|
Matches the last sibling of its type | p:last-of-type { margin-bottom: 0; } |
:nth-of-type(n)
|
Matches siblings of its type at position n | p:nth-of-type(odd) { background: #fafafa; } |
:only-child
|
Matches an element that is the only child of its parent | li:only-child { list-style: none; } |
:only-of-type
|
Matches an element that is the only sibling of its type | img:only-of-type { display: block; margin: auto; } |
:empty
|
Matches elements that have no children or text | div:empty { display: none; } |
:not(selector)
|
Negation pseudo-class — matches elements that do not match | input:not([type=submit]) { border: 1px solid #ccc; } |
:is(selector-list)
|
Matches any element in the selector list (forgiving) | :is(h1, h2, h3) { line-height: 1.2; } |
:where(selector-list)
|
Like :is() but with zero specificity | :where(header, footer) a { color: inherit; } |
:has(selector)
|
Matches parent if it contains the given selector | div:has(img) { padding: 0; } |
:target
|
Matches the element whose id matches the URL fragment | :target { background: yellow; } |
:lang(code)
|
Matches elements with a specific language attribute | :lang(fr) { font-style: italic; } |
Pseudo-elements
| Selector | Description | Example |
|---|---|---|
::before
|
Inserts content before the element's actual content | .quote::before { content: '\201C'; } |
::after
|
Inserts content after the element's actual content | .required::after { content: ' *'; color: red; } |
::first-line
|
Matches the first line of a block-level element | p::first-line { font-weight: bold; } |
::first-letter
|
Matches the first letter of a block-level element | p::first-letter { font-size: 2em; float: left; } |
::selection
|
Matches the portion of text selected by the user | ::selection { background: #005fcc; color: white; } |
::placeholder
|
Matches the placeholder text of form inputs | input::placeholder { color: #aaa; font-style: italic; } |
::marker
|
Matches the marker box of a list item (bullet/number) | li::marker { color: red; font-size: 1.2em; } |
::backdrop
|
Matches the backdrop behind dialog or fullscreen elements | dialog::backdrop { background: rgba(0,0,0,0.5); } |
::file-selector-button
|
Matches the button of a file input element | input[type=file]::file-selector-button { padding: 4px 8px; } |
Attribute Selectors
| Selector | Description | Example |
|---|---|---|
[attr]
|
Matches elements with the attribute present (any value) | [disabled] { opacity: 0.5; } |
[attr=value]
|
Matches elements where attr equals value exactly | [type=submit] { background: blue; } |
[attr~=value]
|
Matches elements where attr contains value as a whole word in a space-separated list | [class~=btn] { cursor: pointer; } |
[attr|=value]
|
Matches elements where attr equals value or starts with value- (for language codes) | [lang|=en] { font-family: Georgia; } |
[attr^=value]
|
Matches elements where attr starts with value | a[href^=https] { color: green; } |
[attr$=value]
|
Matches elements where attr ends with value | a[href$=.pdf]::after { content: ' (PDF)'; } |
[attr*=value]
|
Matches elements where attr contains value as a substring | a[href*=example] { color: orange; } |
[attr=value i]
|
Case-insensitive attribute value matching | [type=TEXT i] { border: 1px solid #ccc; } |
[attr=value s]
|
Case-sensitive attribute value matching (explicit) | [data-theme=Dark s] { background: #000; } |
Sık Sorulan Sorular
CSS özgüllüğü, birden fazla kural aynı öğeyi hedef aldığında hangi stilin geçerli olacağını belirler. Dört bölümlü bir değer olarak hesaplanır (satır içi, ID'ler, sınıflar/öznitelikler/sözde sınıflar, öğeler/sözde öğeler). Satır içi stiller (1,0,0,0) puanı alır. ID seçiciler (#id) (0,1,0,0), sınıf seçiciler ve öznitelik seçiciler (0,0,1,0), öğe seçiciler ve sözde öğeler ise (0,0,0,1) puanı alır. En yüksek özgüllüğe sahip seçici kazanır. Özgüllükler eşit olduğunda stil sayfasında sonra gelen kural geçerli olur. !important bildirimi tüm özgüllük kurallarını geçersiz kılar.
Tek iki nokta üst üste (:) sözde sınıfları belirtir; öğeleri durumlarına veya konumlarına göre seçer — örneğin :hover, :focus, :nth-child() veya :not(). Çift iki nokta üst üste (::) sözde öğeleri belirtir; bir öğenin belirli bir bölümünü seçer ve biçimlendirir — örneğin ::before, ::after, ::first-line veya ::placeholder. Çift iki nokta söz dizimi, CSS3'te sözde öğeleri sözde sınıflardan ayırt etmek için tanıtılmıştır. Geriye dönük uyumluluk için çoğu tarayıcı :before ve :after gibi eski sözde öğeler için tek iki nokta üst üsteyi de kabul eder.
:nth-child(n), öğe türünden bağımsız olarak ebeveyninin n'inci çocuğu olan öğeyi seçer. Yani p:nth-child(2), yalnızca ebeveyninin ikinci çocuğu olan bir
'yi seçer. :nth-of-type(n), aynı türdeki n'inci kardeşi seçer. Yani p:nth-of-type(2), diğer öğe türleri arasındaki konumundan bağımsız olarak kardeşler arasındaki ikinci
'yi seçer. Uygulamada, bir kapsayıcı içinde karışık öğe türleri olduğunda :nth-of-type() genellikle daha öngörülebilirdir.
Öznitelik seçicileri, HTML özniteliklerinin varlığına veya değerine göre öğeleri eşleştirir. [attr] o özniteliğe sahip öğeleri seçer. [attr="değer"] özniteliğin tam olarak değere eşit olduğu öğeleri seçer. [attr^="değer"] öznitelik değerin belirtilen ifadeyle başlaması durumunda eşleşir. [attr$="değer"] değerin belirtilen ifadeyle bitmesi durumunda eşleşir. [attr*="değer"] öznitelik değerin herhangi bir yerinde o ifadeyi içermesi durumunda eşleşir. [attr~="değer"] özniteliğin boşlukla ayrılmış bir liste olup değeri içermesi durumunda eşleşir. Örneğin a[href^="https"], "https" ile başlayan tüm bağlantıları hedef alır.
Evet. Seçicileri çeşitli yollarla birleştirebilirsiniz. Gruplama (A, B) aynı stilleri birden fazla seçiciye uygular. Zincirleme (A.B veya A:hover) tüm koşulları aynı anda karşılayan öğeyi hedef alır — örneğin div.active, "active" sınıfına sahip bir
'i eşleştirir. Birleştiriciler ilişkileri tanımlar: boşluk (A B) torunları, > (A > B) doğrudan çocukları, + (A + B) hemen bitişik kardeşi ve ~ (A ~ B) sonraki tüm kardeşleri hedef alır. Bu teknikleri birleştirmek, ek sınıf veya ID'ye gerek kalmadan çok özel kurallar yazmanıza olanak tanır.