How to become genius in CSS Selector in Selenium || Create Custom Dynamic CSS Selectors 

here is the list of all CSS locators discussed in video: Custom CSS 1. id--> htmltag#id , #id 2. class --> htmltag.classname, .classname, .c1.c2.c3, htmltag.c1.c2.c3...cn 3. parent>childtag ul#categories #username input#username input.form-control.private-form__control.login-email input#username.form-control.private-form__control.login-email input.login-email .form-control.private-form__control.login-email 4. htmltag[id='value'] //div[@id='test'] input[id='username'] -- css with one attribute //input[@id='username'] --xpath input[id='username'][type='email'] -- css with two attributes //input[@id='username' and @type='email'] -- xpath 5. contains the text in css: input[id*='user'] input[id*='name'] id = test_123 test_345 test_456 input[id*=test_] 6. starting the text in css: input[id^='user'] 7. ending the text in css: input[id$='name'] 8. comma in css: div.private-form__input-wrapper, input#username 9. first-of-type in css: ul#categories>li:first-of-type 10. last-of-type in css: ul#categories>li:last-of-type 11. nth-of-type ul#categories>li:nth-of-type(1) ul#categories>li:nth-of-type(14) ul#categories>li:nth-of-type(3) ul#categories>li:nth-of-type(n) -- all 12. sibling of element: div.private-form__input-wrapper + div div.private-form__input-wrapper+div.private-form__meta ul#categories>li:nth-of-type(3)+li 13. not operator in css: input.form-control.private-form__control:not(.login-password)

I must say, You are a great Contributor to QA community. You are giving back to community what every legends do. Pls keep sharing stuffs like this.

Very well documented. Previously I was just copying the Css Selectors from the browser and editing, now I know how I can write my own and of course in different ways. Simply Perfect. :)

Always wanted to know more about css selector and finally have gained so much after watching this video..... Thank you Naveen 😀😊

You have made tutorials on literally every topic I can think of, mad respect for you!❤

You make it so simple that after watching your video feel very confident

Hi Naveen Sir. Am a trainer too but I would definitely say that if am doing well in my career then the half of the credit goes to you Sir. Dnt stop being awesome....

Thank you so much Naveen i am following your classes from last 3 years the way your explanation is really really superb thank you 🎉

Hi navin sir, you r a gem. I am continuously following your videos. How much dedications you have to explain these concepts in so better way. Really hats off to you Sir

It is an Amazing that I never seen before the perfect way like this to write css and X path

Most detailed video on this topic on RU-vid 👍😊

Hi Naveen...You are the best..I started my career by seeing your RU-vid blog...

Great Job Naveen! I can't thank you enough.

Thank you so much. You save my life through this video.

Intact, I'm waiting for this video. I never see this kind of explanation. Thank you Naveen.

Your tutorials are helping me a lot in real time testing. Thank you so much sir.

You made CSS Selector very simple...wow

This video on CSS has been the best I have ever come across. Thanks Naveen. Hope to reach 100k subscribers soon.

Very well Explained. I was able to understand both X path and CSS from your videos. Thanks a ton Naveen.

Crystal clear explanation with examples ..Thank you Naveen

Waoo I have never seen css explanation like this before ❤️

I wanted to Give you National Award for Explanation of CssSelector 👌👌👌👌👌👌

Great video on CSS Selectors. Thanks for this video.

As they say when youtuber explains not a single bit go waste. Thanks Naveen for this video.

Well Explained. Thanks Naveen Sir...for this wonderful tutorials. Like you said, I didn't find any of these in other video tutorials...as Yet...!!

Excellent Naveen sir..i learned lot of things from your video

Great video, exactly what I was looking for. for those who come later the point 3 is shown in the point 9

Thanks man, im doing a coding project for an interview and this is very helpful

Wow brilliant efforts Naveen, glad to see your videos after long time, please make videos regularly if possible Thanks

Thanks Naveen for this video on css selectors. Now that i can equally have css selectors also along with the xpaths in my framework.

Nice lecture, everything about css you will find here

extremely useful Naveen!

Thank you Naveen...that's a perfect explanation of CSS selectors

you are great man, just thank you for sharing us such interesting topic

u are the god of automation Naveen.

Thank you sir... Great explaination

Its Great video! ✔ ~15minits and I aware watching in 2x spead🏁

such a valuable video.thank yu so much

Thanks for super Explanation on CSS

Hi Naveen, this is really amazing information. Thanks

very well explained thanks naveen for the demonstration..observed one thing element identified through css selector is fast than element identification through xpath ..

It’s absolutely super clear👌

Such amazing explanation!!! 👏

Thanks Naveen for video, Waiting for this video since long.... :)

Naveen:-Symbol of Excellence

Very clear and helpful Thank you.

Very good explanation👍

Thank You So much Naveen:) It's really a very helpful video!!!

Thank you @Naveen, It's really Helpful Is there any way to select 'Inner Text' using CSS Selector ?

Custom CSS CSS SELECTORS 1. Id → htmltag#id 2. Class → htmltag.classname, .classname ] is also correct , .c1.c2.c3 ]in case of cascading, htmltag.c1.c2.c3…..cn 3. parent>childtag 4. Can remove htmltag in case id or class name is unique Selecting a tag Therefore ul#categories>li#first.list>a 5. Need to remove spaces and replace it with ‘.’ Therefore, input.pro-12.max-34r.Global 6. htmltag[id=’value’] is also correct, no need to write // for css selectors htmltag[id=’value’] → css with one attribute htmltag[id=’value’][type=’email’] → css with two attributes //htmltag[id=’value’ and type=’email’] → xpath with two attributes 7. Contains the text in CSS Contains function was present in css0 but was removed from css3 input[id*=’user’] or input[id*=’name’] 8. Starting the text in CSS input[id^=’user’] or input[id^=’u’] 9. Ending the text in CSS input[id$=’name’] or input[id*$’e’] 10. Selecting first of its type and last of its type ul#categories>li:first-of-type ul#categories>li:last-of-type nth-of-type ul#categories>li:nth-of-type(1) ul#categories>li:nth-of-type(n) → all elements 10. Sibling category div.wrapper-form+div#whole-form

thanks Naveen !

This video is very valuable, Naveen. Thank you soo much :)

Thanks#Naveen.You.are.the.best!

great video. very helpful. thanks

Thank you for this video.

Hi Naveen , nice video and it is more useful I have one question in css selectors how to navigate from child to parent ??

Hi Naveen, Thanks for the detailed explanation :) I have a 2 doubts > in contains: you said if we have any attribute in above example then how to use contains but in a html tag if there are no attributes and only text is available then how to identify it using css. (Ex: In Xpath, we use //div[contains(text(),'New Owner')]) > how to go to immediate element from current element using CSS (Ex: In Xpath, we can use "/.." to move to immediate parent ) Can you help me on this Thanks in Advance

Really very helpful video!!! Awesome Naveen..!! Not able to find the document in the comment section. Pls provide

Great information sir what if we want to write css selector based on text. For ex: span span I want to write css selector that includes that text. Like span[text] what if span doesn't have any attributes like class, I'd it only contains text. And that text is dynamic

Thanks Naveen .

thank you for sharing the knowledge...

Very nice video.. Thanks Naveen.. Quick question.. When do we use sibling locater in real time

Thanks for sharing this video Naveen. Could you please help me here? I am looking for writing CSS by using parent, following, preceding like we do in xpath. Ex: xpath is "//span[contains(text(),'Close')]/parent::button". How can we write css for this xpath?

Sir , thanks a ton !!! True blessing to society. I would like to help with some contribution. How can I do it ?

Awesome video...knowledge packed.

Thanks Naveen:)

Hi naveen, how to handle text in css. In xpath we have text function but in css do we have any?

Hi Naveen, I have same div class for 3 times ,for them parent and super parent all are same, but text only differs. For example: select1 select2 select3 Here for all the div’s parents have the same name. How can I get the text of select1 or select2? Tried with .sample(contains:”select1”),when I try with “.sample” 3 occurrences,used nth-of-type(1)but its selecting all select1,2,3. How can I get the text?

Thanks! You are genius. 😃

Hi Naveen can u update. blazemeter URL in video description which will be helpful

very well video & i just want to know that 3dr parent>child & sibling of element in cs are same?

Thanxxx a lot sir😊

How to know the css selector for the next page on a website for pagination. Iam using windows power automate for web data extractions

Hi Thanks for nice example. How to use, if ul is not having any class or id? Just simple

Thanks a lot naveen😍😍

Hi Naveen...how can we write css if only text is unique ,such as: text

Hi Naveen, Thanks aton for the amazing custom CSS selector types. In CSS, is there any reverse engineering to go the preceding sibling? This would be really helpful when we want to click on a check box of a particular record in a dynamic table based on the text

Hi Naveen, how to get the text in Css Like in Xpath we use ( //span[text()='Username']

We have only one classname and that is not unique one so in this scenario how we can select that, Naveen?

Hi Naveen, Thanks for nice video. I have a question, CSS selector is static or not ?

Can you please upload the video for specflow bdd, csharp , page object ,data driven and api with cd cid video

hi, I want to select "Admin" (css selector only cos i'm using cypress) but i have nothing in front of Admin? what should I do? Admin fyi, this is one of the items from drop down list. thanks a lot

Hi Naveen. Is it possible to locate element with text in css selector?

Hi Naveen, it is really a very good video I was waiting for video on CSS since long. Thanks a lot. Could you please also add the content of this video in description.

One thing which I was unable to locate using CSS was text in BlazeMeter site like " The Continuous Testing Journey"

que : if we are getting the address as 1of 4 on a page for getting the text, and adress of both are also same in such case what can be done in case of css selector?

Can we give text in nth-of-type to match text and then click on element?

thanks, I know more ways to get Css locators

Naveen can we execute css selector directly from a reference element? For example I have find element1. Then I will do element1.FindElement(By.CssSelector("some expression")); Something like this so the css expression will only be run from the reference element?

Hi bro pls tell me how to open chrome browser using selenium in visual studio code ?

Thank you for this great video :)

Better than XPath video

1) For following sibling u were used + symbol but what we can use for preceding sibling 2)how to get parent tag by using css selector

Hi Naveen, Thanks for the video. Is there any function similar to text() as in xapth same for css

Hi Naveen, Could you please create video on writing xpath for shadow dom

thanks for your coaching bro

Hi @Naveen can you please let us know how to usee CSS Selector for webtable ?

TQ bro

Thank you so much 👍

//span[contains(text(),''Sample")] what will be it's css