CODEWITHSUNDEEP
c#cssanglesharp
Alex L
Alex L

Reputation: 11

CSS selector. Select one of two classes with the similar name

I try to parse web-site using AngleSharpe and I have the following case:

<div class="list another">
  <div class="item1"></div>
  <div class="item2"></div>
</div>

...

<div class="list">
  <div class="item1"></div>
  <div class="item2"></div>
</div>

I need to get class "list", but I'm getting the first "list another" by order.

var selector = @"div[class$='list']";
var cell = document.QuerySelectorAll(selector);

I tried to use the following various:

"div[class$=list]"
"div.list"

When I'm using selector with parent class of "list", which differ from parent class of "list another" like "parent class > list", I don't get nothing.

Please give me advice how will be right or where necessary see to solve this issue

Upvotes: 1

Views: 723

Answers (3)

Alex L
Alex L

Reputation: 11

Thanks a lot everyone! It didn't work because I didn't notice that this class is changing by script in browser. And because of this class unavailable in AngleSharp. I found "nonscript" section.

Upvotes: 0

Florian Rappl
Florian Rappl

Reputation: 3189

As mentioned by others you can do that fully using CSS Selectors:

var config = Configuration.Default;
// note: ideally load your document from a URL directly if applicable
var document = await BrowsingContext.New(config)
    .OpenAsync(res => res.Content(@"<!doctype html>
<html lang=en>
<head>
<meta charset='utf-8'>
<title>Test Doc</title>
</head>
<body>
<div class=""list another""></div>
<div class= ""list""></div>
</div>
</body>
</html>"));
document.QuerySelector(".list:not(.another)").ClassList.Dump();

The code above uses LINQPad (see Dump()), with AngleSharp 0.14.

LINQPad Output

Note that this is different from just using .list:

LINQPad with the previous query

Finally, you can take advantage of QuerySelectorAll and just put LINQ afterwards.

To confirm, going over all elements having the list class is like:

document.QuerySelectorAll(".list").Select(m => m.ClassList).Dump();

where we get

Iterating over the results

For instance, the following works:

document
  .QuerySelectorAll(".list")
  .Where(m => m.ClassList.Count() == 1)
  .Select(m => m.ClassList)
  .FirstOrDefault()
  .Dump()

This gives us exactly the same as the selector above .list:not(.another) even though it is much more constraint (instead of knowing which other classes should not appear, it just makes sure that only the desired one has been placed).

Hope that helps!

Upvotes: 0

theFrontEndDev
theFrontEndDev

Reputation: 973

Try this, selects all dom elements with class .list, but not with class .another. So you will be able to select the second div exclusively

     document.querySelectorAll(".list:not(.another)");

Upvotes: 1

Related Questions