নির্দিষ্ট পাঠ্যযুক্ত উপাদানগুলির জন্য কি সিএসএস নির্বাচনকারী রয়েছে?

Question

আমি নিম্নলিখিত টেবিলের জন্য সিএসএস নির্বাচনকারীকে খুঁজছি:

Peter    | male    | 34
Susanne  | female  | 12

"পুরুষ" সমন্বিত সমস্ত টিডি মিলিয়ে দেওয়ার জন্য কি কোনও নির্বাচক আছে?

Comments

সমস্যাটি হ'ল পারফরম্যান্ট উপায়ে প্রয়োগ করা এটি খুব কঠিন।

— Ms2ger

কোনও এক্সপ্যাথ সিলেক্টর এটি টেক্সট () পদ্ধতিতে করতে পারেন (যদি আপনি জাভাস্ক্রিপ্ট এক্সিকিউটার ব্যবহার না করা পছন্দ করেন)।

— জাঙ্গোফান

আপনি এক্সপথ: // এইচ 1 [পাঠ্য () = 'সেশন'] ব্যবহার করে এটি কীভাবে করতে পারেন তার একটি উদাহরণ এখানে দেওয়া হয়েছে এবং আপনি Chrome এ p x ("h1 [পাঠ্য () = 'সেশন'] টাইপ করে ক্রোমে এক্সপথ পরীক্ষা করতে পারেন ) কনসোলে

— VinnyG

এটি এত সুবিধাজনক হবে। উদাহরণস্বরূপ, একটি চেকমার্ক বা স্ট্রিং "হ্যাঁ", "পাস", "ঠিক আছে" ইত্যাদি সহ একটি টেবিল সেল সবুজ হতে পারে।

— Andreas Rejbrand

$xপ্রশ্নের উত্তর। আসল প্রশ্নের জন্য, $x("//td[text()='male']")কৌশলটি কি

— জিয়াও

Answer 1

আমি স্পেসিফিকেশনটি যদি সঠিকভাবে পড়ি , না।

আপনি কোনও উপাদানের সাথে, উপাদানের একটি গুনের নাম এবং কোনও উপাদানের একটি নামযুক্ত বৈশিষ্ট্যের মান মিলাতে পারেন। যদিও কোনও উপাদানের মধ্যে সামগ্রীর সাথে মেলে সামগ্রীর জন্য আমি কিছুই দেখতে পাচ্ছি না।

Comments

সেখানে এক প্রান্ত ক্ষেত্রে দেখা যায়: :empty।

— সিরো সান্তিলি 郝海东 冠状 病 六四 事件 法轮功

আমার নিজের প্রশ্নের উত্তর দিতে: হ্যাঁ, এটি আজও সত্য! সামগ্রী নির্বাচনকারীদের অবচিত করা হয়েছে! সিএসএস 3 এর পরে আর কোনও সামগ্রী নির্বাচক নেই। ( W3.org/TR/css3-selectors/#selectors )

— wlad

Answer 2

JQuery ব্যবহার:

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

Comments

এর বিপরীতে প্রয়োজন শেষ হয়েছে, যা: jQuery (উপাদান)। নট (": ধারণ করে ('স্ট্রিং'))")

— জাজি

এটি সিএসএস নয়, এটি জাভাস্ক্রিপ্ট।

— Synetech

সম্মত - সে কারণেই আমার উত্তর বলেছিল যে আমি সিএসএস নয়, jQuery ব্যবহার করছি। তবে আমার উত্তরের সেই অংশটি সম্পাদনা করা হয়েছিল। =)

— moettinger

তবে ফে পুরুষ শব্দটিতেও 'পুরুষ' শব্দটি রয়েছে? এটি কি কেবল 'কোস পুরুষ প্রথম হয় কাজ করে? তাদের পুনরায় অর্ডার দেওয়া হলে বাগ হওয়ার অপেক্ষায়?

— মাইকেল ডুরান্ট

@ মিশেল ডুরান্ট: আপনি হাস্যকর, তবে ক্রস-এলিমেন্ট স্ট্রিং ম্যাচিং (যা একই উপাদানগুলির মধ্যে নিয়মিত সাবস্ট্রিংয়ের ম্যাচের চেয়ে আরও বড় সমস্যা) আসলে সবচেয়ে বড় কারণ: রয়েছে () বাদ দেওয়া হয়েছিল।

— BoltClock

Answer 3

দেখে মনে হচ্ছে তারা সিএসএস 3 অনুমানের জন্য এটি সম্পর্কে চিন্তাভাবনা করছে তবে তা কাটেনি ।

:contains()সিএসএস 3 নির্বাচক http://www.w3.org/TR/css3-selectors/# কনটেন্ট- নির্বাচক

Comments

Looks like they were thinking about it for the CSS3 spec but it didn't make the cut.এবং সঙ্গত কারণে, এটি স্টাইলিং, সামগ্রী, কাঠামো এবং আচরণ পৃথক করার পুরো ভিত্তিকে লঙ্ঘন করবে।

— সিনিটেক

@ সাইনটেক এটি প্রকৃতপক্ষে সামগ্রী থেকে স্টাইলিং পৃথককরণে সহায়তা করতে পারে, কারণ এর অর্থ যে বিষয়বস্তুটিকে তার ক্লায়েন্ট সম্পর্কে জানার দরকার নেই এটি স্টাইলিংকে বেস করার পক্ষে গুরুত্বপূর্ণ বিবেচনা করবে। এই মুহূর্তে আমাদের এইচটিএমএল বিষয়বস্তুগুলি স্টাইলারের যত্নশীল ক্লাসগুলি অন্তর্ভুক্ত করে CSS এর সাথে দৃly়ভাবে যুক্ত করা হয়েছে। সিএসএস 3-এ অ্যাট্রিবিউট মান নির্বাচনকারীদের দ্বারা প্রমাণিত হিসাবে তারা ইতিমধ্যে সামগ্রীটিতে সিএসএস দেওয়ার দিকে এগিয়ে চলেছে।

— ড্যানিমিস্টার

@ সাইনটেক এবং এটি ঠিক কীভাবে "আচরণ"? আমার কাছে এটি উপস্থাপনের বিষয়। এটা না কি কিছু - এটি উপস্থাপন করে নির্দিষ্ট প্রকারের সামগ্রীর একটি নির্দিষ্ট উপায়।

— বারবারাওয়ারকোয়ার্ক

@ ড্যানিমিস্টার, ওহ আপনাকে আমাকে বোঝাতে হবে না। বছর দু'বছর এবং আমি ঠিক এই কার্যকারিতাটি অনুসন্ধান করার চেষ্টা করার সময় নিজেকে এখানে ফিরে পেয়েছি এবং বিচলিত যে কেবল এটির অস্তিত্বই নেই, তবে তা প্রত্যাখ্যানও করা হয়েছিল। B ইবে সবেমাত্র তাদের ইউআই পরিবর্তন করেছে এবং তাদের সাইটটি ব্যবহার করা খুব শক্ত করে তুলেছে। আমি এটি ব্যবহারকারীর স্টাইলশিট দিয়ে ঠিক করার চেষ্টা করছি, তবে তাদের মার্কআপ নিলাম এবং বিআইএন তালিকার মধ্যে পার্থক্য করে না, সুতরাং তালিকার বিডের সংখ্যা হাইলাইট করার একমাত্র উপায় হ'ল উপাদানটির পাঠ্যবস্তুর সাথে মিল রেখে by কাউকে বোঝাতে যা লাগে তা হ'ল প্রথমবারের মতো ব্যবহারের ক্ষেত্রে অভিজ্ঞতা অর্জন করা।

— Synetech

বিষয়বস্তু এবং স্টাইলিংয়ের ভাল বিভাজন নিশ্চিত করার জন্য, আমাদের কাছে একটি রয়েছে: (নির্বাচক) নেই। সুতরাং, কোনও সামগ্রীর উপর ভিত্তি করে কোনও ঘর স্টাইল করার পরিবর্তে (যেমন, "ওপেন" বা "সমাধান করা" এর "স্থিতি" কলাম), আমরা প্রদর্শন এবং শ্রেণীর বৈশিষ্ট্যগুলিতে উভয়ই অনুলিপি করব এবং তারপরে এটি নির্বাচন করব । অসাধারণ!

— জন ক্লসকে

Answer 4

আপনাকে data-genderএকটি maleবা femaleমান দিয়ে ডাকা সারিতে একটি ডেটা অ্যাট্রিবিউট যুক্ত করতে হবে এবং বৈশিষ্ট্য নির্বাচকটি ব্যবহার করতে হবে:

এইচটিএমএল:

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

সিএসএস:

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

Comments

জাভাস্ক্রিপ্ট এবং সিএসএস সহ কাস্টম ডেটা অ্যাট্রিবিউট ব্যবহার করা পুরোপুরি ঠিক। এমডিএন ডেটা অ্যাট্রিবিউট ব্যবহার করে

— মাইকেল বেঞ্জামিন

আমি সম্মত হয়েছি যে ডেটা অ্যাট্রিবিউটটি কীভাবে পরিচালনা করা উচিত তা হল, তবে td.male এর মতো একটি সিএসএস নিয়ম সেটআপ করা প্রায়শই সহজতর হয়, বিশেষত কৌণিক দিয়ে যা দেখতে কিছু দেখতে পারে: <td শ্রেণি = "{{person.geender}} ">

— ডিজেড্যাভমার্ক

লিঙ্গ অবশ্যই একটি আদর্শ উদাহরণ যেখানে ক্লাসগুলি কাজ করবে। কিন্তু, যদি তথ্যটি কেবল maleবা আরও বেশি বৈচিত্র্যযুক্ত হয় female? সত্য যে classঅন্য ক্লাসের দিয়ে পূর্ণ, তাদের অর্ডার নিশ্চিত করা হয় না, সেখানে অন্য শ্রেণী নামের সাথে collissions হতে পারে ইত্যাদি তোলে classকাপড় এই ধরনের খারাপ জায়গা। একটি উত্সর্গীকৃত data-*গুণাবলী সেই সমস্ত স্টাফ থেকে আপনার ডেটা বিচ্ছিন্ন করে এবং এ্যাট্রিবিউট সিলেক্টরগুলি ব্যবহার করে এতে আংশিক মিলগুলি ইত্যাদি করা সহজ করে তোলে।

— স্টিজন ডি উইট

একটি কার্যকরী কোড স্নিপেটের সাথে আরও একটি উত্তর রয়েছে যা একইভাবে উপাত্ত বৈশিষ্ট্য ব্যবহার করে।

— জোশ হাবদাস

Answer 5

এটি বাস্তবায়িত হয়নি কেন তার জন্য আসলে একটি ধারণাগত ভিত্তি রয়েছে। এটি মূলত 3 টি দিকের সংমিশ্রণ:

1. কোনও উপাদানটির পাঠ্য সামগ্রী কার্যকরভাবে সেই উপাদানটির একটি শিশু
2. আপনি সরাসরি পাঠ্য সামগ্রীকে লক্ষ্য করতে পারবেন না
3. সিএসএস নির্বাচকদের সাথে আরোহণের অনুমতি দেয় না

এই 3 টি একত্রে বোঝানো হয়েছে যে পাঠ্য সামগ্রী থাকা অবস্থায় আপনি ধারণকারী উপাদানটিতে ফিরে যেতে পারবেন না এবং আপনি বর্তমান পাঠ্যটি স্টাইল করতে পারবেন না। এটি সম্ভবত তাত্পর্যপূর্ণ হিসাবে অবতরণ কেবল প্রসঙ্গ এবং SAX শৈলীর বিশ্লেষণের একক ট্র্যাকিংয়ের অনুমতি দেয়। আরোহী বা অন্যান্য অক্ষের সাথে জড়িত অন্যান্য নির্বাচক আরও জটিল ট্র্যাভারসাল বা অনুরূপ সমাধানের প্রয়োজনীয়তার পরিচয় দেয় যা সিওএসের প্রয়োগকে ডিওমে ব্যাপকভাবে জটিল করে তুলবে।

Comments

এটা সত্য. এটি এক্সপথের জন্য। আপনি যদি জেএস / জেকিউয়ারি বা পার্সিং লাইব্রেরিতে (কেবল সিএসএসের বিপরীতে) নির্বাচককে কার্যকর করতে পারেন, তবে এক্সপথের text()ফাংশনটি ব্যবহার করা সম্ভব হবে ।

— মার্ক টমাস

বিষয়বস্তু সম্পর্কে এটি একটি ভাল পয়েন্ট । তবে আমি কীভাবে চাই যে :contains(<sub-selector>)আপনি এমন একটি উপাদান নির্বাচন করতে পারেন যাতে অন্যান্য নির্দিষ্ট উপাদান রয়েছে। div:contains(div[id~="bannerAd"])বিজ্ঞাপন এবং এটির ধারক থেকে মুক্তি পেতে পছন্দ করুন ।

— লরেন্স ডল

Answer 6

আপনি সামগ্রী হিসাবে ডেটা অ্যাট্রিবিউট হিসাবে সেট করতে পারেন এবং তারপরে এখানে দেখানো হিসাবে অ্যাট্রিবিউট সিলেক্টর ব্যবহার করতে পারেন :

/* 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());
  });
});

Comments

মনে রাখবেন .text()এবং .textContentভারী ভারী, লম্বা তালিকাগুলি বা বড় টেক্সটগুলিতে সম্ভব হলে এড়াতে চেষ্টা করুন। .html()এবং .innerHTMLদ্রুত হয়।

— অরিয়াদাম

@ জোশহাবদাস আপনি কি নিজের পরিবর্তনের কোনও জেসবিন / জেএসফিডেল উদাহরণ তৈরি করতে পারবেন?

— বুক্সি

আপনি যদি jQuery ব্যবহার করতে চলেছেন তবে এতে নির্বাচকগুলি রয়েছে:$("td:contains(male)")

— হুইলারের

যদি বিষয়বস্তুটি ব্যবহারকারী ( contenteditable='true'- আমার কেস) দ্বারা সম্পাদনযোগ্য হয় data-contentতবে পৃষ্ঠাটি রেন্ডার হওয়ার আগে এটির জন্য গুণকের মান নির্ধারণ করা যথেষ্ট নয় । এটি ধারাবাহিকভাবে আপডেট করতে হবে। এখানে আমি কী ব্যবহার করছি:<td onkeypress="event.target.setAttribute('data-content', event.target.textContent);">

— ক্যারাম

Answer 7

সিএসএসের এই বৈশিষ্ট্যটির অভাব হওয়ায় আপনাকে সামগ্রী দ্বারা স্টাইলের ঘরগুলিতে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে। উদাহরণস্বরূপ এক্সপাথের সাথে contains:

var elms = document.evaluate( "//td[contains(., 'male')]", node, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null )

তারপরে ফলাফলটি এর মতো ব্যবহার করুন:

for ( var i=0 ; i < elms.snapshotLength; i++ ){
   elms.snapshotItem(i).style.background = "pink";
}

https://jsfiddle.net/gaby_de_wilde/o7bka7Ls/9/

Comments

এটি জাভাস্ক্রিপ্ট, এটি প্রশ্নের সাথে কীভাবে সম্পর্কিত?

— রুবো 77

আপনি সিএসএসের বিষয়বস্তু দ্বারা নির্বাচন করতে না পারার জন্য এটি করতে আপনাকে জেএস ব্যবহার করতে হবে। আপনি ঠিক যেখানে আছেন আপনি যেখানে এটি নির্দেশ করেছেন যে এটি CSS নয়, কোনও ডেটা অ্যাট্রিবিউটের ব্যবহার সামগ্রী দ্বারা নির্বাচন করা হচ্ছে না। আমরা কেবল অনুমান করতে পারি যে পাঠক কেন সামগ্রী দ্বারা কোষগুলি নির্বাচন করতে চান, এইচটিএমএলটিতে তাঁর কী ধরণের অ্যাক্সেস রয়েছে, কত মিল রয়েছে, কত বড় টেবিল ইত্যাদি

— ব্যবহারকারী 40521

Answer 8

আমি আশঙ্কা করছি এটি সম্ভব নয়, কারণ সামগ্রীটি কোনও বৈশিষ্ট্য নয় বা এটি ছদ্ম শ্রেণীর মাধ্যমে অ্যাক্সেসযোগ্য। সিএসএস 3 নির্বাচনকারীদের পুরো তালিকাটি সিএসএস 3 নির্দিষ্টকরণে পাওয়া যাবে ।

Answer 9

যারা সেলেনিয়াম সিএসএস পাঠ্য নির্বাচনগুলি করতে চাইছেন তাদের জন্য এই স্ক্রিপ্টটি কিছুটা কার্যকর হতে পারে।

কৌশলটি হ'ল আপনি যে উপাদানটির সন্ধান করছেন তার পিতামাতাকে নির্বাচন করা এবং তারপরে পাঠ্যটি রয়েছে এমন শিশুটির জন্য অনুসন্ধান করুন:

public static IWebElement FindByText(this IWebDriver driver, string text)
{
    var list = driver.FindElement(By.CssSelector("#RiskAddressList"));
    var element = ((IJavaScriptExecutor)driver).ExecuteScript(string.Format(" var x = $(arguments[0]).find(\":contains('{0}')\"); return x;", text), list);
    return ((System.Collections.ObjectModel.ReadOnlyCollection<IWebElement>)element)[0];
}

আমার ক্ষেত্রে যদি এটির ক্ষেত্রে সবসময় এক উপাদান থাকে তবে এটির একাধিক থাকলে এটি প্রথম উপাদানটি ফিরিয়ে দেবে।

Comments

আপনি TD:contains('male')যদি সেলেনিয়াম ব্যবহার করছেন তবে আপনি ব্যবহার করতে পারবেন : imho কেবল তখনই এটি ব্যবহার করুন যদি আপনি ক্লাসগুলি যুক্ত করার জন্য উত্স আপডেট করতে না পারেন। উদাহরণস্বরূপ যদি আপনি লিগ্যাসি কোডটি পরীক্ষা করে নিচ্ছেন বা আপনার সংস্থা আপনাকে ডেভস (ইউর!) এর সাথে কথা বলতে দেয় না কারণ আপনার পরীক্ষাগুলি ভঙ্গুর হবে এবং যদি পরে কেউ পাঠ্য পরিবর্তন করে masculineবা ভাষা পরিবর্তন করে তবে তা ভেঙে যাবে । সসল্যাবস ডক্স containsএখানে ব্যবহারের চিত্র দেখায় ( সসেল্যাবস / রিসোর্সস / আর্টিকেলস / সেলেনিয়াম- টিপস-সিসি-সিলেক্টরস) + সিসি @ ম্যাটাস ভাইটকেভিসিয়াস আমি কিছু মিস করেছি?

— স্নোকোড

Answer 10

আমি ডেটা অ্যাট্রিবিউট (ভয়েজারের উত্তর) -এর সাথে সম্মত , এটি কীভাবে পরিচালনা করা উচিত, তবে বিএসটি, সিএসএসের নিয়মগুলি:

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

প্রায়শই সেটআপ করা খুব সহজ হতে পারে, বিশেষত ক্লায়েন্ট-সাইড লিবসের সাথে অ্যাংুলারজগুলির মতো যা এতটা সহজ হতে পারে:

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

কেবল নিশ্চিত করুন যে সামগ্রীটি কেবল একটি শব্দ! অথবা আপনি এমনকি বিভিন্ন সিএসএস শ্রেণীর নামের সাথে ম্যাপ করতে পারেন:

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

সম্পূর্ণতার জন্য, এখানে ডেটা অ্যাট্রিবিউট পদ্ধতির:

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

Comments

টেম্পলেট বাইন্ডিং একটি দুর্দান্ত সমাধান। তবে মার্কআপ কাঠামোর উপর ভিত্তি করে ক্লাসের নামগুলি তৈরি করা কিছুটা ঝাঁকুনি অনুভব করে (যদিও এটি বিইএম অনুশীলনে যা কিছু করে)।

— জোশ হাবদাস

Answer 11

@ data-*অ্যাট্রিবিউট ব্যবহারের বিষয়ে ভয়েজারের উত্তর (উদাহরণস্বরূপ , 2017 সালের data-gender="female|male"সবচেয়ে কার্যকর এবং মানদণ্ডের সাথে সম্মতিযুক্ত পদ্ধতির:

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

প্রায় কাছাকাছি সবচেয়ে গোল করতে সেখানে সীমিত নির্বাচকরা যদিও কিছু লেখা প্রায় ভিত্তিক হয় সাধিত হবে না। :: প্রথম অক্ষর একটি হল সিউডো-উপাদান যে একটি উপাদান প্রথম অক্ষর সীমাবদ্ধ স্টাইলিং আবেদন করতে পারেন। এখানে একটি :: প্রথম-লাইন সিউডো-উপাদান রয়েছে যা স্পষ্টতই কোনও মৌলের প্রথম লাইনটি নির্বাচন করে (যেমন অনুচ্ছেদে) এটিও ইঙ্গিত দেয় যে এটি বিদ্যমান দক্ষতাটি পাঠ্য নোডের নির্দিষ্ট দিকগুলিকে স্টাইল করার জন্য ব্যবহার করা যেতে পারে could ।

এই ধরনের অ্যাডভোকেসি সাফল্য না পাওয়া পর্যন্ত এবং পরবর্তী স্থানটি কার্যকর না করা পর্যন্ত আমি যখন স্পেস ডিলিমিনেটর ব্যবহার করে explode/ splitশব্দের সাথে প্রযোজ্য তখনই আমি প্রস্তাব করতে পারি, প্রতিটি spanউপাদানকে একটি উপাদানের অভ্যন্তরে আউটপুট দেয় এবং তারপরে যদি শব্দ / স্টাইলিং লক্ষ্যটি সংমিশ্রণে অনুমানযোগ্য ব্যবহার হয় : নবম নির্বাচকরা :

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

অন্যথায় অনুমানযোগ্য না হলে , আবার, data-*অ্যাট্রিবিউট ব্যবহার সম্পর্কে ভয়েজারের উত্তরটি ব্যবহার করুন । পিএইচপি ব্যবহার করে একটি উদাহরণ:

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

Answer 12

আপনি যদি চিম্প / ওয়েবড্রাইভার.ইও ব্যবহার করছেন তবে তারা সিএসএস অনুমানের চেয়ে অনেক বেশি সিএসএস নির্বাচককে সমর্থন করে।

এটি উদাহরণস্বরূপ, প্রথম অ্যাঙ্কারে ক্লিক করবে যেখানে "ব্যাড বিয়ার" শব্দটি রয়েছে:

browser.click("a*=Bad Bear");

Answer 13

এখানে বেশিরভাগ উত্তরগুলি আরও তথ্য অন্তর্ভুক্ত করার জন্য কীভাবে এইচটিএমএল কোড লিখতে হয় তার বিকল্প প্রস্তাব দেওয়ার চেষ্টা করে কারণ অন্তত অভ্যন্তরীণ পাঠ্য দ্বারা কমপক্ষে CSS3 পর্যন্ত আপনি কোনও উপাদান নির্বাচন করতে পারবেন না। তবে এটি করা যেতে পারে, আপনাকে কেবল কিছুটা ভ্যানিলা জাভাস্ক্রিপ্ট যুক্ত করতে হবে, বিজ্ঞপ্তিতে যেহেতু মহিলাতেও পুরুষ রয়েছে এটি নির্বাচন করা হবে:

      cells = document.querySelectorAll('td');
    	console.log(cells);
      [].forEach.call(cells, function (el) {
    	if(el.innerText.indexOf("male") !== -1){
    	//el.click(); click or any other option
    	console.log(el)
    	}
    });

 <table>
      <tr>
        <td>Peter</td>
        <td>male</td>
        <td>34</td>
      </tr>
      <tr>
        <td>Susanne</td>
        <td>female</td>
        <td>14</td>
      </tr>
    </table>

<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>

Answer 14

আপনি যদি জাভাস্ক্রিপ্ট বা jquery ব্যবহার করতে না চান তবে আপনার সেরা বাজি হিসাবে অ্যাট্রিবিউট বিকল্পটি আমি খুঁজে পাই।

যেমন তৈরি শব্দের সাথে সমস্ত সারণী কক্ষকে স্টাইল করতে, এইচটিএমএলে এটি করুন:

 <td status*="ready">Ready</td>

তারপরে সিএসএসে:

td[status*="ready"] {
        color: red;
    }

Answer 15

আপনি টেবিল কোষগুলির contentসাথে attr()এবং স্টাইলটি ব্যবহার করতে পারেন যা ::not :empty

th::after { content: attr(data-value) }
td::after { content: attr(data-value) }
td[data-value]:not(:empty) {
  color: fuchsia;
}

<table>
  <tr>
    <th data-value="Peter"></th>
    <td data-value="male">&#x0200B;</td>
    <td data-value="34"></td>
  </tr>
  <tr>
    <th data-value="Susanne"></th>
    <td data-value="female"></td>
    <td data-value="12"></td>
  </tr>
  <tr>
    <th data-value="Lucas"></th>
    <td data-value="male">&#x0200B;</td>
    <td data-value="41"></td>
  </tr>
</table>

এ ZeroWidthSpaceরঙ পরিবর্তন করতে ব্যবহৃত হয় এবং ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে যুক্ত করা যেতে পারে:

const hombres = document.querySelectorAll('td[data-value="male"]');
hombres.forEach(hombre => hombre.innerHTML = '​');

যদিও <td>এর শেষ ট্যাগটি বাদ দেওয়া যেতে পারে এটি এটিকে শূন্যস্থান হিসাবে গণ্য করতে পারে।

Answer 16

যদি আপনি নিজেই ডিওএম তৈরি না করেন (যেমন একটি ব্যবহারকারী স্ক্রিপ্টে) আপনি খাঁটি জেএস দিয়ে নিম্নলিখিতটি করতে পারেন:

for ( td of document.querySelectorAll('td') ) {
  console.debug("text:", td, td.innerText)
  td.setAttribute('text', td.innerText)
}
for ( td of document.querySelectorAll('td[text="male"]') )
  console.debug("male:", td, td.innerText)

<table>
  <tr>
    <td>Peter</td>
    <td>male</td>
    <td>34</td>
  </tr>
  <tr>
    <td>Susanne</td>
    <td>female</td>
    <td>12</td>
  </tr>
</table>

কনসোল আউটপুট

text: <td> Peter
text: <td> male
text: <td> 34
text: <td> Susanne
text: <td> female
text: <td> 12
male: <td text="male"> male

Answer 17

এর মতো ছোট ছোট ফিল্টার উইজেটগুলি করা:

    var searchField = document.querySelector('HOWEVER_YOU_MAY_FIND_IT')
    var faqEntries = document.querySelectorAll('WRAPPING_ELEMENT .entry')

    searchField.addEventListener('keyup', function (evt) {
        var testValue = evt.target.value.toLocaleLowerCase();
        var regExp = RegExp(testValue);

        faqEntries.forEach(function (entry) {
            var text = entry.textContent.toLocaleLowerCase();

            entry.classList.remove('show', 'hide');

            if (regExp.test(text)) {
                entry.classList.add('show')
            } else {
                entry.classList.add('hide')
            }
        })
    })

Answer 18

এই প্রশ্নের বাক্য গঠনটি রোবট ফ্রেমওয়ার্ক সিনট্যাক্সের মতো দেখাচ্ছে। এই ক্ষেত্রে, এমন কোনও সিএসএস নির্বাচক নেই যা আপনি ব্যবহারের জন্য ব্যবহার করতে পারেন, সেখানে একটি সেলেনিয়ামলিবারি কীওয়ার্ড রয়েছে যা আপনি পরিবর্তে ব্যবহার করতে পারেন। অপেক্ষা উপাদান পর্যন্ত রয়েছে ।

উদাহরণ:

Wait Until Element Contains  | ${element} | ${contains}
Wait Until Element Contains  |  td | male