[css] क्या कुछ पाठ वाले तत्वों के लिए कोई सीएसएस चयनकर्ता है?


Answers

JQuery का उपयोग करना:

$('td:contains("male")')
Question

मैं निम्न तालिका के लिए एक सीएसएस चयनकर्ता की तलाश में हूं:

Peter    | male    | 34
Susanne  | female  | 12

क्या "पुरुष" वाले सभी टीडी से मेल खाने के लिए कोई चयनकर्ता है?




मैं डेटा विशेषता (वायगर का उत्तर) से सहमत हूं कि इसे कैसे संभाला जाना चाहिए, लेकिन, सीएसएस नियमों की तरह:

td.male { color: blue; }
td.female { color: pink; }

अक्सर स्थापित करने के लिए बहुत आसान हो सकता है, विशेष रूप से क्लाइंट-साइड libs जैसे angularjs के साथ जो सरल हो सकता है:

<td class="{{person.gender}}">

बस सुनिश्चित करें कि सामग्री केवल एक शब्द है! या आप विभिन्न सीएसएस वर्ग नामों के साथ मानचित्र भी मानचित्रण कर सकते हैं:

<td ng-class="{'masculine': person.isMale(), 'feminine': person.isFemale()}">

पूर्णता के लिए, यहां डेटा विशेषता दृष्टिकोण है:

<td data-gender="{{person.gender}}">



मुझे डर है कि यह संभव नहीं है, क्योंकि सामग्री कोई विशेषता नहीं है और न ही यह एक छद्म वर्ग के माध्यम से सुलभ है। CSS3 चयनकर्ताओं की पूरी सूची CSS3 विनिर्देश में पाई जा सकती है।




आप डेटा विशेषता के रूप में सामग्री सेट कर सकते हैं और फिर विशेषता चयनकर्ताओं का उपयोग कर सकते हैं

/* Select every cell containing word "male" */
td[data-content="male"] {
  color: red;
}

/* Select every cell starting on "p" case insensitive */
td[data-content^="p" i] {
  color: blue;
}

/* Select every cell containing "4" */
td[data-content*="4"] {
  color: green;
}
<table>
  <tr>
    <td data-content="Peter">Peter</td>
    <td data-content="male">male</td>
    <td data-content="34">34</td>
  </tr>
  <tr>
    <td data-conten="Susanne">Susanne</td>
    <td data-content="female">female</td>
    <td data-content="14">14</td>
  </tr>
</table>

आप इस डेटा-सामग्री विशेषताओं को आसानी से सेट करने के लिए jQuery का भी उपयोग कर सकते हैं

$(function(){
  $("td").each(function(){
    var $this = $(this);
    $this.attr("data-content", $this.text());
  });
});



आपको male - female मूल्य वाले data-gender नामक पंक्तियों में डेटा विशेषता जोड़नी होगी और विशेषता चयनकर्ता का उपयोग करना होगा:

HTML:

<td data-gender="male">...</td>

सीएसएस:

td[data-gender="male"] { ... }



@ voyager का data-* विशेषता का उपयोग करने के बारे में उत्तर (उदाहरण के लिए data-gender="female|male" 2017 के रूप में सबसे प्रभावी और मानक अनुपालन दृष्टिकोण है:

[data-gender='male'] {background-color: #000; color: #ccc;}

बहुत अधिक लक्ष्यों को प्राप्त किया जा सकता है क्योंकि पाठ के चारों ओर उन्मुख सीमित चयनकर्ताओं के बावजूद कुछ हैं। ::first-letter एक pseudo-element जो किसी तत्व के पहले अक्षर पर सीमित स्टाइल लागू कर सकता है। स्पष्ट रूप से किसी तत्व (जैसे अनुच्छेद) की पहली पंक्ति का चयन करने के अलावा एक ::first-line छद्म-तत्व भी है, यह भी दर्शाता है कि यह स्पष्ट है कि सीएसएस का उपयोग इस मौजूदा क्षमता को टेक्स्ट नोड के स्टाइल विशिष्ट पहलुओं को बढ़ाने के लिए किया जा सकता है ।

जब तक इस तरह की वकालत सफल नहीं होती है और अगली सबसे अच्छी चीज लागू होती है, तो मैं सुझाव दे सकता हूं कि एक स्थान डिलीमिनेटर का उपयोग करके शब्दों को explode / split करने के लिए लागू होता है, प्रत्येक शब्द को एक span तत्व के अंदर आउटपुट करें और फिर यदि शब्द / स्टाइल लक्ष्य अनुमान के साथ संयोजन में उपयोग किया जा सकता है : एनएच चयनकर्ता :

$p = explode(' ',$words);
foreach ($p as $key1 => $value1)
{
 echo '<span>'.$value1.'</span>;
}

अन्यथा, अनुमानित नहीं है, फिर, data-* विशेषता का उपयोग करने के बारे में Voyager के उत्तर का उपयोग करें। PHP का उपयोग कर एक उदाहरण:

$p = explode(' ',$words);
foreach ($p as $key1 => $value1)
{
 echo '<span data-word="'.$value1.'">'.$value1.'</span>;
}



Related