I'm working with mPDF and was wondering if there is a way with css to target an element on a specific page? For example, is there a way to do this to select my "mainContent" div on the first page?:
#page:first .mainContent{width:66%;etc...etc...}
you have to select elements using class or id.
Related
For example, .button{} selects Button class and .text-area{} selects TextArea class. So when it does that, does that select the entire class itself(opposed to specific instances of a class)? If it does, is there any way for Javafx CSS to select a specific instance of a class or just in general, a variable?
You're selecting every Node containing the style class contained in the location where you apply the css stylesheet.
For some nodes one or more style classes are added, it's also possible to modify them.
someNode.getStyleClass().setAll("my-class");
To select individual nodes though usually a id selector is used:
mySpecialButton.setId("special-button");
CSS
#special-button {
/* TODO... */
}
This question already has answers here:
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 5 years ago.
I have the following link which will be rendered inside my breadcrumb navigation:-
<a class="breadcrumbNode" href="http://******/kb/CustomerKB/_layouts/15/listform.aspx?ListId=%7B9A25812B%2DE8BA%2D4085%2D95D0%2D9E05CF3DC441%7D&PageType=0&RootFolder=%2Fkb%2FCustomerKB">CustomerKB</a>
so is there a way using CSS to hide the link which have the following text CustomerKB ??
You can use the *= selector to select based on the link.
a[href*="CustomerKB"] {
display:none
}
If you want to select based on the actual text contents of the anchor tag then you'd need to use something like jquery.
$("a:contains('CustomerKB')").hide();
If you want to hide all elements containing specific text, you will have to use Javascript. The only way I can think of to do this with CSS is by adding another class to the links you want to hide, or wrapping the text in another tag and giving this tag specific classes depending on what's in it, and you do not seem to want to do that.
Any particular reason you do not want to use JS?
If you can use Javascript, I would simply do something like
document.getElementsByClassName("breadcrumbNode").forEach(function(item) {
if (item.innerHTML === "whatevertext") {
item.classList.add("hidden")
}
});
HTML (clicky click)
I need to select this tr using only CSS, I can't use the ID because i need to select the last tr in this section for every subforum - and all the IDs are different.
Try using a class.
From what you are saying, it looks like you want to select each item with a <tr> tag at the bottom. In the tag add class="<your custom class here>". (Ex: class="bottomtr") In the CSS code, using .<your custom class here> style it how you want. It is just like any other selector in CSS and can be formatted the same way.
I am trying to do the following:
I have set up a number of Magento attributes for my products & I want to display an icon next to an attribute called "Color" as well as attach an alt tag to this icon/image. My theme has each of the attributes set up as a dt tag, & so the css I am trying to apply is as follows:
dt[foo^="Color:"]{background: url(http://xyz.com/skin/frontend/default/default/images/warning.png) no-repeat 100% 0%;}
and here is the markup:
<div class="white-box-inner">' '<dl class="attribute-list clearfix">``<dt class="first">Size:</dt>``<dd class="first">21</dd> <dt>Manufacturer:</dt>``<dd>Hat Designs</dd>``<dt>Color:</dt>
<dd>Red</dd>``<dt>Fabric</dt> <dd>Felt</dd> </dl> </div>
This however does not display the icon I'd like to appear.
I'm also not sure how to have an alt tag associated with this icon either via css. I'd rather not mess with the template files. Any help is appreciated.
Thanks.
-TM
From your markup it looks like you're trying to select an element by its content. Attribute selectors only select by attributes; they don't select by content.
There was going to be a :contains() pseudo-class, but it was dropped from the spec and so you can't do this using CSS selectors anymore.
jQuery implements :contains(), though, so you could simply use jQuery to add a class and style that class.
Additionally, you cannot associate alt text or a tooltip to a background image in CSS. You're going to have to go through the JavaScript route to achieve this.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS: div id VS. div class
I am new to CSS and have general question: how do you decide wether it is better to use class selector or id selector?
The answers on this page are all good, but approach the difference from a more pragmatic point of view. Let me try an explain it to you from another point of view. The id you use when you define a conceptual entity of your page, for example a list of something, or a page footer or a navigational menu. Something of which you generally have merely one, as another wouldn't make sense or would be another type of entity. When you have a pattern of repeating entities, or element which serve the same purpose you tend to assign them a class, think about section headers, photos in a gallery etc. So the items in the previously mentioned list would all be assigned the same class name.
Note though, that merely for styling reasons you could do with just classes, never use a single id, and be perfectly fine. It doesn't matter whether your class is used just once, or many times.
From the W3C standards an id should only be used once on a page, while a class can be used multiple times.
"ID" definition from http://www.w3schools.com/tags/att_standard_id.asp
The id attribute specifies a unique id for an HTML element.
The id must be unique within the HTML document.
The id attribute can be used by a JavaScript (via the HTML DOM) or
by CSS to make changes or style the element with the specified id.
"Class" definition from http://www.w3schools.com/tags/att_standard_class.asp:
The class attribute specifies a classname for an element.
The class attribute is mostly used to point to a class in a style sheet.
However, it can also be used by a JavaScript (via the HTML DOM) to make changes
to HTML elements with a specified class.
Since an id should be unique on the page it is also accessed A LOT faster through javascript
Id must be unique, class is not. So it depends on how you want to section the page.
id identifies uniquely an element, so you use it when you have only one element with it (ex ...
the class is applied to a group of elements with same features.
best practice says id is unique in the whole html page
ID's should be used for single elements:
<table id="specialtable">
Classes should be used for multiple elements:
<h3 class="awesomeheader"> <!-- an awesome header -->
<h2 class="awesomeheader"> <!-- another awesome header -->
It's good to use an id when you only have one item that you need to style for. Ex:
<div id = 'myDiv>Text</div>
#myDiv
{
display: block;
}
But when you have multiple items that you want to style the same way (say on multiple pages with css file for example) it is faster (and better) to use a class
<div class = "MyDiv> text </div>
<div class = "MyDiv> more text</div>
.MyDiv
{
color: black;
}