CSS Attribute Selectors

CSS Attribute Selectors In Hindi

CSS

CSS Attribute Selectors In Hindi – Is Tutorial Me Hamne CSS Attribute Selectors Ko With Examples Explain Kiya Hai |

CSS Attribute Selectors In Hindi

Hamne CSS Selectors Tutorial Me Dekha Tha Ki Kis Tarah Selectors Ki Help Se Ham Kisi Html Element Ko Style De Skte Hai , CSS Attribute Me Ham Dekhenge Ki Attribute Ki Help Se Ham Kis Prkar Kisi Element Ko Style De Skte Hai |

CSS Attribute Selectors Ka Sabse Jyada Use Forms Ko Style Karne Me Kiya Jata Hai, Jo Ki Ham Is Tutorial Me Last Me Dekhenge, Ki Kis Parkar CSS Attribute Ki Help Se Simple Form Ko Stylish Bana Skte Hai|

CSS [attribute] Selector In Hindi

[attrubute] Selector Ko Kisi Specified Attribute Wale Html Elements Ko Select Karne Ke Liye Kiya Jata Hai , Aur Select Karne Ke Bad Ham Un Elements Ko CSS Properties Ki Help Se Style De Skte Hai |

Example : Is Example Me Ham 3 <a> Tag Lenge Jinme Se 2 <a> Me Ham target Attribute Dalenge Aur Fir Unhe Target Karne Ki Koshish Karte Hai |

<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
  background-color: red;
  color : white;
}
</style>
</head>
<body>

<h2>Master Programing-CSS Selector Tutorial</h2>
<a href="https://masterprograming.com/">masterprograming.com</a><br><br>
<a href="http://www.google.com" target="_blank">google.com</a><br><br>
<a href="http://www.facebook.com" target="_top">facebook.com</a>

</body>
</html>

Output :

Output Me Hamne Dekha Ki target Attribute Wale <a> Par Hi CSS Apply Hui Hai, To Is Tarah Ham Attribute Ki Help Se Bhi Html Elements Par CSS Properties Apply Kar Skte Hai |

CSS [attribute=”value”] Selector In Hindi

Upar Hamne Dekha Ki Kis Parkar Attribute Ki Help Se Elements Ko Select Kiya Ja Skta Hai , Ab Ham Attribute And Us Attribute Ki Value Dono Ki Help Se Html Elements Ko Select Karna Sikhenge |

Example : Upr Diye Gye Example Me Hi Tisre <a> Ki Attribute Value Change Kar Dete Hai Aur Fir 2nd <a> Ko Select Karne Ki Koshish Karte Hai |

<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
  background-color: red;
  color : white;
}
</style>
</head>
<body>

<h2>Master Programing-CSS Selector Tutorial</h2>
<a href="https://masterprograming.com/">masterprograming.com</a><br><br>
<a href="http://www.google.com" target="_blank">google.com</a><br><br>
<a href="http://www.facebook.com" target="_top">facebook.com</a>

</body>
</html>

Output :

Dekha Is Tarah Bhi Ham Kisi Element Par CSS Apply Kar Skte Hai |

CSS [attribute~=”value”] Selector In Hindi

Un Html Elements Jinke Attribute Ki Value Kuchh Specified Word Hoti Hai Unko Select Karne Ke Liye [attribute~=”value”] Selector Ka Use Kiya Jata Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
[title~=paragraph] {
  border: 2px solid black;
}
</style>
</head>
<body>

<h2>Master Programing- CSS Attribute Selector</h2>

<p>Thus is paragraph</p>
<p title="paragraph">Thus is paragraph</p>
<p title="paragraph">Thus is paragraph</p>

</body>
</html>

Output :

Hamne Tin Paragraph Me Se Do Paragraph Ko Attribute Value Di Hai I Isliye Dono Ke Upar CSS Apply Hua Hai ,Aagar Aap Aisa Nahi Karte To Tin Me Se Do <p> Ko Style De Hi Nhi Pate Eksath Isliye CSS Attribute Selector Bahut Important Hai |

CSS [attribute|=”value”] Selector In Hindi

[attribute|=”value”] Selector Un Html Elements Ko Select Karne Ke Liye Use Kiya Jata Hai Jinke Attribute Ki Value Kisi Specified Word Se Start Hoti Hai , Next Word Chahe Kuchh Bhi Ho Bas Startng Word Match Hona Jaroori Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
[class|=top] {
  background: hotpink;
}
</style>
</head>
<body>

<h2>Master Programing-CSS Attribute Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Master Programing</p>
<p class="topcontent">CSS Tutorials In Hindi</p>

</body>
</html>

Output :

Upar Diye Gye Example Me Hamne <h1> And <p> Tags Ko Class Attribute Diye Hai Aur Unhe Kuchh Value Di Hai But Style Only Unhi Html Elements Par Apply Hui Hai Jinki Attribute Value Ek Specified Word Se Start Hui Hai |

CSS [attribute^=”value”] Selector In Hindi

[attribute^=”value”] Selector Sirf Attribute Value Ke Starting Word Par Depend Karta Hai , Attribute Value Ka Pura Word Hona Bhi Jaruri Nahi Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
  background: hotpink;
}
</style>
</head>
<body>

<h2>Master Programing-CSS Attribute Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Master Programing</p>
<p class="topcontent">CSS Tutorials In Hindi</p>

</body>
</html>

Output :

Is Prkar Only Attribute Value Ka Only Kuchh Part Match Karakar Bhi Ham Us Element Ko Select Kar Skte Hai Aur Style De Skte Hai |

CSS [attribute$=”value”] Selector In Hindi

Ab Tak Ham Attribute Value Ki Starting Value Ya Word Ki Bat Kar Rhe The But Agar Attribute Value Kisi Specified Value Se End Hoti Hai To [attribute$=”value”] Selector Ka Use Un Html Elements Ko Select Karne Me Kiya Jata Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style> 
[class$="test"] {
  background: hotpink;
}
</style>
</head>
<body>

<h2>Master Programing-CSS Attribute Selector</h2>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

Output :

Output Me Dekha Jis-Jis Attribute Ki Value test Ke Sath End Ho Rhi Thi Usi Elment Ke Upr CSS Apply Hua Hai , Is Parkar Ham Attribute Ki Ending Value Ko Bhi Use Kar Skte Hai |

CSS [attribute*=”value”] Selector In Hindi

Example :

[attribute*=”value”] Selector Un Html Elements Ko Select Krne Me Use Kiya Jata Hai Jinke Attribute Kisi Specified Value Ya Alphbets Contain Karta Ho |

Example : Is Example Me Jis Element Ke Attribute Value Me “te” Hoga, Attribute Selector Sirf Unhi Ko Select Krega |

<!DOCTYPE html>
<html>
<head>
<style> 
[class*="te"] {
  background: hotpink;
}
</style>
</head>
<body>

<h2>Master Programing-CSS Attribute Selector</h2>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

Output :

Jaisa Ki Hamne Is Tutorial Ke Starting Me Apko Btaya Tha Ki CSS Attribute Selector Ka Use Mainly Forms Ko Style Dene Me Kiya Jata Hai, To Chaliye Dekhate Hai Ki CSS Attribute Selectors Ko Ham Form Me Kese Use Kar Sakte Hai |

Styling Forms In CSS In Hindi

Ham Jante Hai Ki Form Ko Style Dene Ke Liye Generally Class And Id Ka Use Kiya Jata Hai But Ab Ham Dekhenge Ki Bina Class And Id Ke Ham Form Ko Kese Style De Skte Hai |

CSS Attribute Selector Ko Use Kar Ke Ham Bina Class And Id Ke Bhi Html Form Ko Stylish Bana Skte Hai, Chaliye Dekhate Hai Yah Kese Kiya Ja Sakta Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: #DA0037;
}

input[type=button] {
  width: 80px;
  margin-left: 35px;
  display: block;
  color : green;
  background-color: #66DE93;
  cursor : pointer;
}
</style>
</head>
<body>

<h2>Stylish Form</h2>

<form name="input" action="" method="get">
  Firstname:<input type="text" name="Name" value="Master" size="20">
  Lastname:<input type="text" name="Name" value="Programing" size="20">
  <input type="button" value="Button">
</form>

</body>
</html>

Output :

Is Tarah Aap Sirf CSS Attribute Selector Ki Help Kisi Form Ko Stylish Bana Skte Ho Aur Vo Bhi Bina Class And Id Ke |

Agar Apko CSS Attribute Selecote Se Related Koi Bhi Doubt Ho To Comment Section Me Puchh Skte Hai |

Leave a Reply

Your email address will not be published.