Element Selectors

Element Selector అనేది HTML element పేరు ఆధారంగా ఆ elementలను select చేసి style చేయడానికి ఉపయోగించే CSS selector.

ఉదాహరణకు, p selector పేజీలో ఉన్న అన్ని <p> elementsను select చేస్తుంది. అలాగే h1 selector అన్ని <h1> elementsను select చేస్తుంది.

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

ఒకే రకం HTML elements అన్నింటికీ ఒకే style ఇవ్వడానికి.
ప్రతి paragraph, heading లేదా list itemను విడిగా select చేయకుండా త్వరగా style చేయడానికి.
వెబ్ పేజీలో consistent design ఉంచడానికి.

Syntax

element-name {
  property: value;
}

ఇక్కడ element-name స్థానంలో HTML tag పేరు రాయాలి. Selector తర్వాత curly bracesలో CSS declarations రాయాలి.

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

Browser HTML documentను చదివినప్పుడు, CSSలో ఉన్న element selectorకు సరిపోయే అన్ని HTML elementsను కనుగొంటుంది. ఆ elementsపై selectorలో ఇచ్చిన styles apply చేస్తుంది.

ముఖ్యమైన విషయం

ఒక element selector ఒకే రకం elements అన్నింటినీ select చేస్తుంది. ఉదాహరణకు p selector ఉంటే, పేజీలోని ప్రతి paragraphకు ఆ style వర్తిస్తుంది. ఒకే elementను మాత్రమే style చేయాలంటే తరువాత నేర్చుకునే class లేదా ID selectors ఉపయోగిస్తాము.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Element Selectors</title>
  <style>
    h1 {
      color: navy;
    }

    p {
      color: #444444;
      font-size: 18px;
    }

    button {
      background-color: seagreen;
      color: white;
    }
  </style>
</head>
<body>
  <h1>My Web Page</h1>
  <p>This is the first paragraph.</p>
  <p>This is the second paragraph.</p>
  <button>Read More</button>
</body>
</html>

Browserలో పరీక్షించడం

పై complete HTML codeను browser-based HTML editorలో paste చేయండి.
Run లేదా Preview buttonను నొక్కండి.
h1, p లేదా button selectorలో value మార్చండి.
మళ్లీ run చేసి browserలో వచ్చిన మార్పును గమనించండి.

Simple Explanation

Element selectorలో HTML tag పేరు నేరుగా selectorగా రాస్తాము. ఉదాహరణకు p selector అన్ని paragraphsను select చేస్తుంది. h1 selector అన్ని main headingsను select చేస్తుంది. Selectorకు సరిపోయే ప్రతి elementకు curly bracesలో ఉన్న styles apply అవుతాయి.

Real-Life Example

ఒక పాఠశాలలో ఉన్న అన్ని notice boardsకు ఒకే రంగు మరియు అక్షర పరిమాణం ఇవ్వాలనుకుంటే, ప్రతి boardను విడిగా మార్చకుండా ఒక నియమంతో అన్నింటినీ style చేస్తాము. అదే విధంగా CSSలో p selector అన్ని paragraphsకు ఒకే styleను apply చేస్తుంది.

Code Examples

HTML Elementsను Element Selectorsతో Style చేయడం

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Element Selectors</title>
  <style>
    h1 {
      color: navy;
    }

    p {
      color: #444444;
      font-size: 18px;
    }

    button {
      background-color: seagreen;
      color: white;
    }
  </style>
</head>
<body>
  <h1>My Web Page</h1>
  <p>This is the first paragraph.</p>
  <p>This is the second paragraph.</p>
  <button>Read More</button>
</body>
</html>

h1, p మరియు button మూడు element selectors. అవి తమకు సరిపోయే HTML elementsను select చేస్తాయి. అందువల్ల రెండు p elementsకూ ఒకే color మరియు font size apply అవుతుంది.

The heading appears in navy. Both paragraphs appear in dark gray with a larger font size. The button has a seagreen background and white text.

Line-by-Line Explanation

<style>
ఇది HTML documentలో CSS రాయడానికి ఉపయోగించే style sectionను ప్రారంభిస్తుంది.

h1 {
h1 అనేది element selector. ఇది పేజీలోని అన్ని <h1> elementsను select చేస్తుంది.

color: navy;
ఎంచుకున్న ప్రతి <h1> elementలోని textకు navy రంగు ఇస్తుంది.

p {
p selector పేజీలో ఉన్న అన్ని paragraph elementsను select చేస్తుంది.

color: #444444;
అన్ని paragraphsలోని textకు dark gray రంగు apply చేస్తుంది.

font-size: 18px;
అన్ని paragraphs అక్షరాల పరిమాణాన్ని 18 pixelsగా చేస్తుంది.

button {
button selector అన్ని button elementsను select చేస్తుంది.

background-color: seagreen;
ఎంచుకున్న buttonకు seagreen background ఇస్తుంది.

color: white;
buttonలోని textను తెలుపు రంగులో చూపిస్తుంది.

<h1>My Web Page</h1>
ఇది CSSలోని h1 selectorకు సరిపోయే heading element.

<p>This is the first paragraph.</p>
ఈ paragraphకు p selectorలో ఉన్న color మరియు font-size styles apply అవుతాయి.

<p>This is the second paragraph.</p>
ఇది కూడా p element కాబట్టి మొదటి paragraphలాగే అదే styles పొందుతుంది.

<button>Read More</button>
ఈ buttonకు button selectorలో ఇచ్చిన background-color మరియు text color apply అవుతాయి.

Try It

Try this CSS code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Element Selectors</title>
  <style>
    h2 {
      color: darkblue;
    }

    p {
      color: #555555;
    }
  </style>
</head>
<body>
  <h2>Learning CSS</h2>
  <p>Element selectors can style all matching elements.</p>
  <p>Change the CSS values and run the page again.</p>
</body>
</html>

Try It Yourself »

Practice

Practice: పై practice_codeలో h2 headingను dark blueగా, అన్ని p paragraphsను 18px మరియు dark grayగా, అన్ని li itemsను seagreenగా మార్చండి.

Hint: h2, p మరియు li selectorsలో color మరియు అవసరమైన font-size declarationsను మార్చండి.

Common Mistakes

Selector ముందు dot లేదా hash రాయడం. ఉదాహరణకు .p లేదా #p రాయడం.
Element selector కోసం HTML tag పేరు మాత్రమే రాయాలి: p, h1 లేదా li. Dot మరియు hash వేరే selector types కోసం ఉపయోగిస్తారు.

HTML tag పేరు తప్పుగా రాయడం. ఉదాహరణకు paragarph అని రాయడం.
Selector HTML element పేరుతో సరిగ్గా match కావాలి. Paragraph కోసం pను ఉపయోగించండి.

Selectorలోని curly braces మర్చిపోవడం.
ప్రతి element selector తర్వాత declarationsను { } మధ్యలో రాయాలి.

ఒకే element selector అన్ని elementsను style చేస్తుందని మర్చిపోవడం.
p selector పేజీలోని అన్ని paragraphsను మార్చుతుంది. ఒక paragraphను మాత్రమే target చేయాలంటే తరువాత class లేదా ID selectors నేర్చుకోండి.

Interview Questions

Element Selector అంటే ఏమిటి?

Answer: HTML element పేరు ఆధారంగా elementsను select చేసి style చేసే CSS selectorను Element Selector అంటారు.

p selector ఏమి చేస్తుంది?

Answer: పేజీలో ఉన్న అన్ని <p> paragraph elementsను select చేసి, వాటికి ఇచ్చిన CSS stylesను apply చేస్తుంది.

ఒక element selector ఎన్ని elementsను select చేయగలదు?

Answer: ఆ selectorకు సరిపోయే పేజీలోని అన్ని elementsను select చేయగలదు. ఉదాహరణకు p selector అన్ని paragraphsను select చేస్తుంది.

Element selector ఎలా రాయాలి?

Answer: HTML tag పేరు రాసి, దాని తర్వాత curly bracesలో declarations రాయాలి. ఉదాహరణ: h1 { color: navy; }

Exam Questions

క్రింది CSSలో element selector ఏది? h2 { color: blue; }

Answer:

h2 element selector.

అన్ని paragraphs textను grayగా మార్చే CSS declaration రాయండి.

Answer:

p { color: gray; }

Element selector HTMLలోని ఏ భాగాన్ని ఆధారంగా చేసుకుని elementsను select చేస్తుంది?

Answer:

HTML tag లేదా element పేరు ఆధారంగా select చేస్తుంది.

ఒక పేజీలో మూడు p elements ఉంటే, p { color: red; } rule ఎన్ని paragraphsపై apply అవుతుంది?

Answer:

మూడు paragraphsపైనా apply అవుతుంది.

Quick Revision

Element selector HTML tag పేరు ఆధారంగా elementsను select చేస్తుంది.
p selector అన్ని paragraphsను select చేస్తుంది.
h1 selector అన్ని h1 headingsను select చేస్తుంది.
Selector తర్వాత declarationsను curly bracesలో రాయాలి.
ఒక element selectorకు సరిపోయే అన్ని elementsకూ style apply అవుతుంది.
ఒకే elementను ప్రత్యేకంగా style చేయడానికి తరువాత class లేదా ID selectors ఉపయోగించవచ్చు.

Element Selectors