ID Selectors అంటే ఏమిటి?

ID Selector ఒక ప్రత్యేకమైన HTML element ను select చేసి దానికి CSS styles apply చేయడానికి ఉపయోగిస్తారు.

ID selector ను CSSలో # symbol తో రాస్తారు. ఉదాహరణకు #main-title selector, id="main-title" ఉన్న element ను select చేస్తుంది.

ID Selector ఎందుకు ఉపయోగిస్తారు?

• ఒక ప్రత్యేకమైన element కు మాత్రమే style ఇవ్వడానికి ఉపయోగిస్తారు.
• HTMLలో id value సాధారణంగా unique గా ఉండాలి.
• ఒకే id ను ఒక pageలో అనేక elements కు ఇవ్వడం నివారించాలి.

ID Selector ఎలా పనిచేస్తుంది?

ముందుగా HTML elementకు id attribute ఇస్తాం. తరువాత CSSలో ఆ id పేరుకు ముందు # symbol పెట్టి selector రాస్తాం.

<h1 id="main-title">Welcome to CSS</h1>

#main-title {
  color: navy;
}

ఇక్కడ #main-title selector, id="main-title" ఉన్న <h1> element పై మాత్రమే navy color apply చేస్తుంది.

Class Selectorతో తేడా

Class Selectorను అనేక elements కు ఒకే style ఇవ్వడానికి ఉపయోగించవచ్చు. ID Selector మాత్రం ఒక ప్రత్యేకమైన element కోసం ఉపయోగించడం మంచిది. Classకు . symbol, IDకు # symbol ఉపయోగిస్తాం.

Simple Explanation

ID Selector అనేది ఒక ప్రత్యేకమైన HTML elementను గుర్తించే CSS selector. HTMLలో id="profile-box" ఉంటే, CSSలో దాన్ని #profile-boxగా select చేస్తాం.

Syntax:

#id-name {
  property: value;
}

ఒక pageలో ఒకే id పేరు ఒక elementకు మాత్రమే ఇవ్వండి. ID పేరులో spaces ఉపయోగించకుండా meaningful name ఇవ్వడం మంచిది.

Real-Life Example

ఒక officeలో ప్రతి employeeకు unique employee ID ఉంటుంది. ఆ ID ద్వారా ఒక నిర్దిష్ట employeeని గుర్తించవచ్చు. అదే విధంగా HTMLలో ఒక ప్రత్యేకమైన elementకు unique id ఇస్తే, CSSలో ID Selector ద్వారా దానిని target చేయవచ్చు.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ID Selector Example</title>
  <style>
    #main-title {
      color: navy;
      background-color: #e8f1ff;
      padding: 12px;
    }

    #special-note {
      color: #7a2800;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1 id="main-title">Welcome to CSS</h1>
  <p>This paragraph has normal styling.</p>
  <p id="special-note">This is an important note.</p>
</body>
</html>

The heading has navy text, a light blue background, and padding. The first paragraph has normal styling. The important note is dark orange and bold.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try ID Selectors</title>
  <style>
    #page-title {
      color: darkgreen;
    }

    #message {
      background-color: #fff3cd;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1 id="page-title">My Web Page</h1>
  <p id="message">This message uses an ID selector.</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• ID Selector ముందు # symbol ఉపయోగించాలి.
• HTMLలోని id value మరియు CSS selector పేరు ఒకేలా ఉండాలి.
• ID ఒక unique elementను target చేయడానికి ఉపయోగిస్తారు.
• ఒకే idను అనేక elementsకు ఇవ్వకండి.
• అనేక elementsకు ఒకే style కావాలంటే Class Selector ఉపయోగించండి.