Is there a way to locate ComputedStyle elements using Nokogiri?

Question

Is there a way to locate ComputedStyle elements using Nokogiri?

I am currently using Ruby along with Nokogiri to parse through HTML documents. I am looking to select all nodes that match a CSS class with the style attribute display: none, but the CSS class is unknown in advance.

For example:

<html>
  <body>
    <p class="visibleTopics">Visible Topic Content</p>
    <p class="invisibleTopics">Invisible Topic Content</p>    
  </body
</html>

In another file, it's defined as:

.invisibleTopic {
    display: none
}

I am interested in selecting the node containing content from the invisibleTopics class based on its style being set to display: none. Any advice or suggestions on how to achieve this?

css ruby nokogiri

Answer 1

Answer №1

Nokogiri doesn't handle styles, as that task requires a web browser. When using Watir-Webdriver, you can achieve this by:

browser.ps.reject{|p| p.visible?}

Answer 2

Nokogiri doesn't handle styles, as that task requires a web browser. When using Watir-Webdriver, you can achieve this by:

browser.ps.reject{|p| p.visible?}

Answer 3

Answer №2

If you're searching for the CSS class, try to locate it within the tags instead of looking for a specific CSS attribute:

require 'nokogiri'

html_text = <<EXAMPLE_HTML
<html>
  <body>
    <p class="visibleTopics">Visible Topic Content</p>
    <p class="invisibleTopics">Invisible Topic Content</p>    
  </body
</html>
EXAMPLE_HTML

document = Nokogiri::HTML(html_text)

document.search('.invisibleTopics').each do |element|
  puts element.text
end

When this code is executed, it will display:

Invisible Topic Content

Answer 4

If you're searching for the CSS class, try to locate it within the tags instead of looking for a specific CSS attribute:

require 'nokogiri'

html_text = <<EXAMPLE_HTML
<html>
  <body>
    <p class="visibleTopics">Visible Topic Content</p>
    <p class="invisibleTopics">Invisible Topic Content</p>    
  </body
</html>
EXAMPLE_HTML

document = Nokogiri::HTML(html_text)

document.search('.invisibleTopics').each do |element|
  puts element.text
end

When this code is executed, it will display:

Invisible Topic Content

Is there a way to locate ComputedStyle elements using Nokogiri?

Answer №1

Answer №2

Similar questions

How to Maintain Spacing Between Two Elements While Ensuring the Right Element Stays to the Right Even if the First One is Hidden in CSS

Aligning HTML form elements side by side

XSLT - Dividing table into three columns while maintaining continuity on the same page

Create a sleek transition for your Bootstrap 4 fixed Navbar by having it smoothly slide down and change to a

Strategies for aligning a div element in the middle of the screen

Establishing the default scroll position in tables using React.js

Generate a see-through overlay when hovering over an image that matches the image's precise dimensions

Hovers and click effects for navigating through images

Tips on creating adaptable images for mobile viewing

browsing through a timeline created using HTML and CSS

Ways to evenly distribute divs into rows

How to style a div to center an image vertically with text using CSS

The scrollbar is shifting the page's content towards the left

What is the equal tr of CSS?

Adjusting the opacity of the background image in the section - focus solely on the background

Navigate to a specific hidden div that is initially invisible

PHP Linking Style Sheets

Incorporating a React component within a Ruby on Rails partial

The CSS scrollbar is visible on the screen, but for some reason,

Deactivate a div based on a Razor variable in ASP.NET MVC4