CSS - How can I select this <tr>? - css

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.

Related

How to define custom styling tags for CSS

Sorry if this is a noob question, but I would like to know if there is a way to make custom tags linked to CSS entries (sorry if this the wrong terminology).
Like the h1, h2 tags but with a name I choose. So that I can apply these custom tags around text and modify it without doing inline styling for every instance or styling a whole div the same. So for example:
<customTag> This makes the text look like what 'customTag' is described in styles.css </customTag>
Is this possible? If so how can I do it?
Thank you.
In a HTML element you can provide the class="YourClassName" attribute to create a custom class that you can access in CSS.
Example:
In your html file you would write something like:
<p class="maintext">Hello World!</p>
And access the class in css like this:
.maintext {
color: #fff;
}
You could then add the class="maintext" attribute to any HTML element you'd like to have the same styling.
See this page for more information about HTML classes.

Is it possible to select a specific class on #page?

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.

Can I Add Custom Formatting Markup to MediaWiki?

Is it possible to add custom formatting markup to MediaWiki?
Say, for example, I have a div style I use quite often and I'd like to make markup to apply it more quickly than using <div id="frequentlyusedstyle">Title</div> -- like surrounding the text with ##Title## instead of typing out the div id. Is that possible?
(I realize that there is already heading markup; that's just an example. Thank you in advance!)
Just create a new page named "Template:name", where 'name' is whatever you want to name it, with the following text (as per your example):
< div id="frequentlyusedstyle">{{{1|}}}< /div>
(minus the extra spaces, since I don't know how to keep html from
parsing here.)
You would then use it by adding {{template name|Title}} to an article, and it will invoke the style.
You will need to have a style defined in MediaWiki:Common.css or similar, in order to style that div, such as:
#frequentlyusedstyle {
color: red;
}
Hope that helps.

Applying conditional CSS selectors to magento atrribute

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.

table, td style in new theme messes up the Google custom Results, How to Fix?

Today I changed the wordpress theme of my blog but the table, td style in the theme style file is messing up the whole Google custom results. I know one solution is to remove all those styles from the file and let Google use its own style. But I also want to keep those for the tables which I occasionally use in my posts.
Can anyone help me how to keep the existing table, td style of my theme while forcing the Google custom search engine to ignore these classes and load its own??
for example you set TD class like this
.td_class { background-color:red}
you can add the class name to your table and set td_class as child class
.table_class {}
.table_class .td_class {background:red}
EDIT
if you don't want to change each tables classes , you can do it on-the-fly with jQuery Selectors
for example your code is like this :
<html>
<div id="MainDiv">
<table>......</table>
<table>......</table>
<table>......</table>
</div>
//goole code here // separated from MainDiv
</html>
you can use this code to change table's class
$(#MainDiv table).each(function(){
$(this).addClass('addClass')
});

Resources