CSS Selector Reference

CSS தேர்ந்தெடுப்பாளர்கள் மற்றும் அவற்றின் பயன்பாடு

CSS தேர்ந்தெடுப்பாளர்கள்

CSS தேர்ந்தெடுப்பாளர்கள் நீங்கள் பாணியிட விரும்பும் HTML உறுப்புகளை "கண்டறிய" (அல்லது தேர்ந்தெடுக்க) பயன்படுத்தப்படுகின்றன.

🧪 CSS தேர்ந்தெடுப்பாளர் சோதனையாளர்:

வெவ்வேறு தேர்ந்தெடுப்பாளர்களை நிரூபிக்க எங்கள் CSS தேர்ந்தெடுப்பாளர் சோதனையாளரைப் பயன்படுத்தவும்.

CSS எளிய தேர்ந்தெடுப்பாளர்கள்

எளிய தேர்ந்தெடுப்பாளர்கள் உறுப்பு-பெயர், id மற்றும் class ஆகியவற்றின் அடிப்படையில் உறுப்புகளைத் தேர்ந்தெடுக்கின்றன. கூடுதலாக, உலகளாவிய தேர்ந்தெடுப்பாளர் (*) உள்ளது.

தேர்ந்தெடுப்பாளர் எடுத்துக்காட்டு எடுத்துக்காட்டு விளக்கம்
element p அனைத்து <p> உறுப்புகளையும் தேர்ந்தெடுக்கிறது
#id #firstname id="firstname" உள்ள உறுப்பை தேர்ந்தெடுக்கிறது
* * அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது
.class .intro class="intro" உள்ள அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது
element.class p.intro class="intro" உள்ள அனைத்து <p> உறுப்புகளையும் தேர்ந்தெடுக்கிறது

எளிய தேர்ந்தெடுப்பாளர்களின் எடுத்துக்காட்டுகள்:

/* உறுப்பு தேர்ந்தெடுப்பாளர் */
p {
    color: blue;
}

/* ID தேர்ந்தெடுப்பாளர் */
#header {
    background: gray;
}

/* Class தேர்ந்தெடுப்பாளர் */
.intro {
    font-size: 16px;
}

/* உலகளாவிய தேர்ந்தெடுப்பாளர் */
* {
    margin: 0;
    padding: 0;
}

CSS பண்பு தேர்ந்தெடுப்பாளர்கள்

பண்பு தேர்ந்தெடுப்பாளர் கொடுக்கப்பட்ட பண்பு தொகுப்பைக் கொண்ட HTML உறுப்புகளைத் தேர்ந்தெடுக்கிறது.

தேர்ந்தெடுப்பாளர் எடுத்துக்காட்டு எடுத்துக்காட்டு விளக்கம்
[attribute] [lang] lang பண்பு உள்ள அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது
[attribute=value] [lang="it"] lang="it" உள்ள அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது
[attribute~=value] [title~="flower"] "flower" என்ற வார்த்தையைக் கொண்ட title பண்பு உள்ள அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது
[attribute|=value] [lang|="en"] lang பண்பு மதிப்பு "en" அல்லது "en-" என தொடங்கும் அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது
[attribute^=value] [href^="https"] href பண்பு மதிப்பு "https" என தொடங்கும் அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது
[attribute$=value] [href$=".pdf"] href பண்பு மதிப்பு ".pdf" என முடியும் அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது
[attribute*=value] [href*="jassif"] href பண்பு மதிப்பில் "jassif" என்ற துணைச் சரத்தைக் கொண்ட அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது

பண்பு தேர்ந்தெடுப்பாளர்களின் எடுத்துக்காட்டுகள்:

/* [attribute] தேர்ந்தெடுப்பாளர் */
[target] {
    border: 1px solid red;
}

/* [attribute=value] தேர்ந்தெடுப்பாளர் */
[type="text"] {
    background: yellow;
}

/* [attribute^=value] தேர்ந்தெடுப்பாளர் */
[href^="https"] {
    color: green;
}

/* [attribute$=value] தேர்ந்தெடுப்பாளர் */
[src$=".jpg"] {
    border: 2px solid gray;
}

/* [attribute*=value] தேர்ந்தெடுப்பாளர் */
[href*="jassif"] {
    font-weight: bold;
}

CSS கூடு தேர்ந்தெடுப்பாளர்

கூடு தேர்ந்தெடுப்பாளர் மற்றொரு உறுப்பின் சூழலுக்குள் ஒரு உறுப்புக்கான பாணிகளைப் பயன்படுத்துகிறது.

தேர்ந்தெடுப்பாளர் எடுத்துக்காட்டு எடுத்துக்காட்டு விளக்கம்
& & மற்றொரு உறுப்பின் சூழலுக்குள் ஒரு உறுப்புக்கான பாணிகளைப் பயன்படுத்துகிறது

கூடு தேர்ந்தெடுப்பாளர் எடுத்துக்காட்டு:

/* CSS கூடு தேர்ந்தெடுப்பாளர் */
.container {
    & .item {
        color: blue;
    }
    
    &:hover {
        background: lightgray;
    }
}

/* இது இதைப் போன்றது: */
.container .item {
    color: blue;
}

.container:hover {
    background: lightgray;
}

CSS தேர்ந்தெடுப்பாளர் பயிற்சி

உங்கள் CSS தேர்ந்தெடுப்பாளர் அறிவை சோதிக்க இந்த பயிற்சியை முயற்சிக்கவும்.

❓ class="active" உள்ள அனைத்து <button> உறுப்புகளையும் தேர்ந்தெடுக்கும் CSS தேர்ந்தெடுப்பாளர் எது?

button .active
✗ தவறு! button .active என்பது button உறுப்புக்குள் உள்ள .active class உள்ள உறுப்புகளைத் தேர்ந்தெடுக்கும்
button.active
✓ சரி! button.active என்பது class="active" உள்ள <button> உறுப்புகளைத் தேர்ந்தெடுக்கும்
button#active
✗ தவறு! button#active என்பது id="active" உள்ள <button> உறுப்பைத் தேர்ந்தெடுக்கும், class="active" அல்ல
button, .active
✗ தவறு! button, .active என்பது அனைத்து <button> உறுப்புகளையும் மற்றும் .active class உள்ள அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கும்

CSS போலி வகுப்புகள்

போலி வகுப்புகள் உறுப்புகளின் சிறப்பு நிலையைத் தேர்ந்தெடுக்கப் பயன்படுகின்றன.

:hover

சுட்டியால் சுட்டிக்காட்டப்படும் போது உறுப்பைத் தேர்ந்தெடுக்கிறது

:link

இன்னும் பார்வையிடப்படாத இணைப்புகளைத் தேர்ந்தெடுக்கிறது

:visited

பார்வையிடப்பட்ட இணைப்புகளைத் தேர்ந்தெடுக்கிறது

:focus

கவனம் செலுத்தப்படும் போது உறுப்பைத் தேர்ந்தெடுக்கிறது

:first-child

தாய் உறுப்பின் முதல் குழந்தையாக இருக்கும் உறுப்பைத் தேர்ந்தெடுக்கிறது

:last-child

தாய் உறுப்பின் கடைசி குழந்தையாக இருக்கும் உறுப்பைத் தேர்ந்தெடுக்கிறது

போலி வகுப்பு எடுத்துக்காட்டுகள்:

/* :hover போலி வகுப்பு */
a:hover {
    color: red;
}

/* :first-child போலி வகுப்பு */
li:first-child {
    font-weight: bold;
}

/* :nth-child போலி வகுப்பு */
tr:nth-child(even) {
    background: #f2f2f2;
}

/* :focus போலி வகுப்பு */
input:focus {
    border-color: blue;
}

CSS போலி உறுப்புகள்

போலி உறுப்புகள் உறுப்பின் சில பகுதிகளைத் தேர்ந்தெடுக்கப் பயன்படுகின்றன.

::before

உறுப்பின் உள்ளடக்கத்திற்கு முன் உள்ளடக்கத்தைச் செருகுகிறது

::after

உறுப்பின் உள்ளடக்கத்திற்குப் பின் உள்ளடக்கத்தைச் செருகுகிறது

::first-line

உறுப்பின் முதல் வரியைத் தேர்ந்தெடுக்கிறது

::first-letter

உறுப்பின் முதல் எழுத்தைத் தேர்ந்தெடுக்கிறது

போலி உறுப்பு எடுத்துக்காட்டுகள்:

/* ::before போலி உறுப்பு */
p::before {
    content: "→ ";
    color: green;
}

/* ::after போலி உறுப்பு */
.price::after {
    content: " USD";
    font-weight: bold;
}

/* ::first-letter போலி உறுப்பு */
p::first-letter {
    font-size: 200%;
    color: red;
}

/* ::first-line போலி உறுப்பு */
p::first-line {
    text-transform: uppercase;
}

CSS தேர்ந்தெடுப்பாளர் கலவைகள்

பல்வேறு தேர்ந்தெடுப்பாளர்களை இணைத்து மிகவும் குறிப்பிட்ட தேர்வுகளைச் செய்யலாம்.

கலவை எடுத்துக்காட்டு விளக்கம்
இணைப்பு div.className class="className" உள்ள அனைத்து <div> உறுப்புகள்
குழு h1, h2, h3 அனைத்து <h1>, <h2>, <h3> உறுப்புகள்
பிளவு div p <div> உறுப்புக்குள் உள்ள அனைத்து <p> உறுப்புகள்
நேரடி குழந்தை div > p <div> உறுப்பின் நேரடி குழந்தைகளான அனைத்து <p> உறுப்புகள்

தேர்ந்தெடுப்பாளர் கலவை எடுத்துக்காட்டுகள்:

/* இணைப்பு தேர்ந்தெடுப்பாளர் */
button.primary {
    background: blue;
    color: white;
}

/* குழு தேர்ந்தெடுப்பாளர் */
h1, h2, h3 {
    font-family: 'Arial', sans-serif;
}

/* பிளவு தேர்ந்தெடுப்பாளர் */
.container p {
    margin: 10px 0;
}

/* நேரடி குழந்தை தேர்ந்தெடுப்பாளர் */
nav > ul {
    list-style: none;
}

/* அண்ணன் உறுப்பு தேர்ந்தெடுப்பாளர் */
h2 + p {
    margin-top: 0;
}

CSS தேர்ந்தெடுப்பாளர் சிறந்த பயிற்சிகள்

குறிப்பிட்ட தேர்ந்தெடுப்பாளர்களைப் பயன்படுத்தவும், ஆனால் மிகவும் குறிப்பிட்டதாக இருக்காதீர்கள்
ID தேர்ந்தெடுப்பாளர்களை விட class தேர்ந்தெடுப்பாளர்களை முன்னுரிமைப்படுத்தவும்
பிளவு தேர்ந்தெடுப்பாளர்களின் ஆழத்தை குறைக்க முயற்சிக்கவும்
மறுபயன்பாட்டிற்காக பொதுவான பாணிகளை உருவாக்கவும்
பொருள்-சார்ந்த class பெயர்களைப் பயன்படுத்தவும்

⚠️ எச்சரிக்கை:

மிகவும் குறிப்பிட்ட தேர்ந்தெடுப்பாளர்கள் CSS குறிப்பிட்ட தன்மையை அதிகரிக்கும், இது பின்னர் பாணிகளை மேலெழுத கடினமாக இருக்கும்.

CSS தேர்ந்தெடுப்பாளரை சோதித்தல்

உங்கள் CSS தேர்ந்தெடுப்பாளர்களைச் சரிபார்க்க Jassif Team இன் CSS தேர்ந்தெடுப்பாளர் சோதனையாளரைப் பயன்படுத்தவும்.

HTML உள்ளீடு

உங்கள் HTML குறியீட்டை உள்ளிடவும்

CSS தேர்ந்தெடுப்பாளர்கள்

சோதிக்க விரும்பும் CSS தேர்ந்தெடுப்பாளர்களை உள்ளிடவும்

முடிவுகளைக் காண்க

உங்கள் தேர்ந்தெடுப்பாளர்கள் எவ்வாறு வேலை செய்கின்றன என்பதைக் காண்க