I'm using Ruby and Nokogiri to parse HTML documents, and I would like to select all nodes matching a CSS class, which I don't know in advance, but have the display: none style attribute.
Example:
<html>
<body>
<p class="visibleTopics">Visible Topic Content</p>
<p class="invisibleTopics">Invisible Topic Content</p>
</body
</html>
and in other file it's defined:
.invisibleTopic {
display: none
}
I'd like to select the node with invisibleTopics content by its style display: none. Any suggestions?
Nokogiri doesn't compute styles. You need a browser for that. With Watir-Webdriver you would do:
browser.ps.reject{|p| p.visible?}
Instead of looking for the CSS attribute, look for the CSS class inside the tags:
require 'nokogiri'
html = <<EOT
<html>
<body>
<p class="visibleTopics">Visible Topic Content</p>
<p class="invisibleTopics">Invisible Topic Content</p>
</body
</html>
EOT
doc = Nokogiri::HTML(html)
doc.search('.invisibleTopics').each do |n|
puts n.text
end
Which, when run, outputs:
Invisible Topic Content
Related
I am trying to modify div class specially ty-product-list__item-name in my template file so it display as h2 tags.
The class is presents in my template file something like this
<div class="ty-product-list__info">
<div class="ty-product-list__item-name">
{assign var="name" value="name_$obj_id"}
{$smarty.capture.$name nofilter}
</div>
Seems to be working just fine with the following statement
<h2 class="ty-product-list__item-name">
{assign var="name" value="name_$obj_id"}
{$smarty.capture.$name nofilter}
</h2>
Perfect
I'm trying (and also did search here) to select a specific element without any success:
<form id="filterForm">
<div class="filterOption filterSection"></div>
<div class="filterOption filterSection"></div>
<div class="filterOption filterSection"></div>
<div class="optioncontent">
<div>
The element I'd like so select via CSS is the ver last div with the class filterOption filterSection. I tried:
.filterSection:last-of-type
.filterSection:last-child
.filterSection:last-of-type
.filterSection:last-child
Any idea on how this could be achieved? Help would be great!
Actually i don't know what you want, it's that using your half code to select specific one or select the last one? If that would be the following:
.filterOption.filterSection:nth-child(1){
background-color:yellow;
}
.filterOption.filterSection:nth-child(2){
background-color:red;
}
.filterOption.filterSection:nth-last-child(2){
background-color:grey;
}
<form id="filterForm">
<div class="filterOption filterSection">1</div>
<div class="filterOption filterSection">2</div>
<div class="filterOption filterSection">3</div>
<div class="optioncontent">
<div>
Here's http://jsfiddle.net/ianwong/p3s62rrm/
If you want to select from the strict closed code, you can click http://jsfiddle.net/ianwong/p3s62rrm/1/
Thank you all for your respond with help.
As Paulie_D mentioned it wont be flexible, but my code is dynamic (div class="filterOption filterSection") . And as Hashem Qolami wrote it's not possible.
I also tried :nth-last-child(1) as wong ian and ghorg12110 mentioned but it wont work as I have more child div's in div class="filterOption filterSection" and need to select the last parent div class="filterOption filterSection".
So I ended up adding an empty div in my php-code right at the end with the css-style I needed.
Not nice, but works for now.
You can try with the css3 property :
.filterOption.filterSection:nth-last-child(1);
You can use the :last-of-type selector as you can see in this Fiddle
So that you can select
<form id="filterForm">
<p class="filterOption filterSection">NO</p>
<p class="filterOption filterSection">NO</p>
<p class="filterOption filterSection">NO</p>
<p class="filterOption filterSection">ME!</p>
<div class="blablabla"></div>
</form>
with this css
.filterOption:last-of-type { color:red }
According to the W3C there's also a :last-child selector as you can check HERE but it didn't work in JSFiddle.
I have been trying to do this for a while with CSS and also data attributes but it is driving me up the wall. It's easy to remove data-iconshadow from buttons, but from collapsibles, not so.
In the Developer Console I can see JQM is applying "data-iconshadow='true'" even after I told it not to using this code (in several places):
<div data-role="collapsible-set" data-iconshadow="false">
<div data-role="collapsible" data-theme="f" data-collapsed-icon="baby" class="ui-icon-nodisc" data-iconshadow="false" data-expanded-icon="arrow-u">
<h2 data-iconshadow="false">0-12 Months</h2>
**insert content here**
</div>
</div>
Yet it still generates this code:
<span class="ui-btn-inner"><span class="ui-btn-text">0-12 Months<span class="ui-collapsible-heading-status"> click to collapse contents</span></span><span class="ui-icon ui-icon-shadow ui-icon-arrow-u"> </span></span>
Yeah it is still writing the data-iconshadow to be true. And I'm not even sure how to target injected attributes with CSS so I am not having much luck with that either. If someone could shed some light on the subject, I would be most grateful.
Working example: http://jsfiddle.net/Gajotres/2NCjb/
HTML:
<div data-role="collapsible-set">
<div data-role="collapsible" data-theme="f" data-collapsed-icon="baby" class="ui-icon-nodisc" data-iconshadow="false" data-expanded-icon="arrow-u" id="custom-collapsible">
<h2 data-iconshadow="false">0-12 Months</h2>
**insert content here**
</div>
</div>
CSS:
#custom-collapsible h2 .ui-btn:after {
background: transparent !important;
}
I'm writing a Stylish user style sheet, and am trying to see if something is possible. I am customizing a page that has a structure like this:
<div class="main">
<div class="someExtraLayers">
<div class="page">
1
</div>
</div>
<div class="someOtherLayers">
<div class="post">
blah blah
</div>
<div class="post">
foo foo
</div>
<div class="post">
bar bar
</div>
</div>
</div>
Where 'someExtraLayers' and 'someOtherLayers' indicate a few levels of divs inside divs. I'm not fully replicating the page's structure here for brevity's sake.
I have this in my user CSS:
div.post:nth-child(1) {
display:block !important;
}
Essentially, I'm making visible the first post element, and this does most of what I want to do. The thing I want to add is that I only want to make that element visible if the content of the page class is 1. If it's not 1, then I don't want to display the first post element.
CSS doesn't seem to offer conditionals, or boolean ANDs, that work this way. But I'm still new-ish to CSS, so I might be missing something. If I have to use a Greasemonkey script instead, I'll do that, but I was hoping there's some CSS trickery that will let me accomplish this.
Stylish cannot do this because Stylish just injects CSS and CSS does not have a selector for text content.
To do what you want, you will have to install Greasemonkey (Firefox) or Tampermonkey (Chrome) and then a userscript can set that visibility.
Assuming that div contains only 1, then something like this complete GM/TM script will do what you want. It uses the awesome power of jQuery selectors.
You can also see a live demo of the code at jsFiddle. :
// ==UserScript==
// #name _Show the first post on page 1
// #include http://YOUR_SERVER.COM/YOUR_PATH/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// #grant GM_addStyle
// ==/UserScript==
var pageHasOne = $("div.main:has(div.page:contains(1))");
pageHasOne.each ( function () {
var jThis = $(this); //-- this is a special var inside an .each()
var pageDiv = jThis.find ("div.page:contains(1)");
if ($.trim (pageDiv.text() ) == "1") {
//--- Show the first post div. !important is not needed here.
jThis.find ("div.post:first").css ("display", "block");
}
} );
Given the logic that jQuery javascript must use, we can see part of the reason why CSS doesn't attempt to provide selectors for this. It's beyond mission scope for CSS, but the kind of thing that javascript was made for.
Also note that this is for a static page. If the page uses AJAX for its content, the logic becomes a bit more involved.
CSS can not access HTML content.
To solve the problem, you will also need to add a class so CSS can "see" it:
HTML:
<div class="main one">
<div class="someExtraLayers">
<div class="page">
1
</div>
</div>
<div class="someOtherLayers">
<div class="post">
blah blah
</div>
<div class="post">
foo foo
</div>
<div class="post">
bar bar
</div>
</div>
</div>
CSS:
.one .post:nth-child(1) {
display:block !important;
}
I'm working on a Joomla 2.5 based website.
i have a submenu with a title (the title is the name of the topmenu category) on top. This title has a background color. Now I want to have a different background color (of the title) on every page that I open.
I thought about creating a extra menu module for every menu item with a specific color defined in the css, but than I have to rename every module because I must not have the same name twice. But I need the title to be the same as the Topmenu category for all the submenu items.
here is the basic structure of the generated code:
<body>
<div id="content">
<div id="breadcrumbs"></div>
<div id="main" class="centerAndRight"></div>
<div id="right">
<div class="moduletable_servicemenu">
<h3>HERE IS THE TITLE</h3>
<ul class="menu"></ul>
</div>
<div class="moduletable_kontaktmodul"></div>
</div>
</div>
<!-- end content -->
<div id="overallfooter"></div>
</body>
Could anybody help me with an idea, please.
Thanx in advance.
If you place a class on that title (e.g. class="title"), and then place a different class on the body tag of each page (e.g. <body class="contact">) you can easily style the title differently on each page, such as:
.contact .title {background: red}
.about .title {background: blue}
I wrote this script for random images, it can be edited to apply towards your desire which is random colors. Its fairly simple and again you can do as many colors as you want, and the program will randomize them.
$(document).ready(function() {
var colors = ['#ccc', '#dedede', '#333', '#555' /***keep adding as many colors***/];
$(".Topcategory").each(function(){
$(this).css({'background' : ' + colors[Math.floor(Math.random() * colors.length)] + ')'})
});
});