I have a table that looks something like this.
EDIT - I re-extracted code. I think the question makes more sense now. (Answers may not)
<div class="view view-latest-news-view view-id-latest_news_view view-display-id-latest_news_block_1 view-dom-id-1">
<div class="views-admin-links views-hide">
</div>
<div class="view-content">
<table class="views-view-grid">
<tr class="row-1 row-first">
<td class="col-1">
</td>
</tr>
<table>
</div>
</div>
How can I address only the "views-view-grid" tables that are contained by the "view-latest-news-view" class? Something like this...
.view-latest-news-view table.views-view-grid {
border-collapse:separate;
border: 1px solid red;
}
** END EDIT **
Thanks!
** ANSWER: **
this works... but maybe I could be more specific?
.view-latest-news-view .views-view-grid {
border-collapse:separate;
border: 1px solid red;
}
This does not work because <table class="views-generic-grid"> is not contained with in any element with the class views-admin-links. (You open the div and then immediately close it, so it has no children.)
So when you say this:
How can I address only the "views-generic-grid" tables that are contained by the "views-admin-links" class?
The answer is you can't, because there are no "views-generic-grid" tables contained in elements with the "views-admin-links" class.
Either extend the div to surround the table, or pick a different selector than .views-admin-links.
The way your markup is right now, you can't, you have to extend .views-admin-links to surround the entire .views-generic-grid table, and then you can write a selector like this:
.views-admin-links .views-generic-grid
Related
I have two sets of markup on my page:
<div class="row">
<div>Some random div(s)</div>
<table></table>
</div>
and
<div class="row">
<div>Some random div(s)</div>
<h1>Table Title</h1>
<table></table>
</div>
I would like to apply margin-top and some other CSS customizations to div.row > table when there is no h1 in div.row.
For example, in the above markup the first table would be styled but the second would not.
I can't find a convenient way to setup a rule for that set of conditions. I'm quite new to SASS and don't want to have to add a specific class to the table element.
Do you have any tips on what to do to achieve this?
As you are looking to style a table which always appears after an adjacent h1 element this is achievable in CSS by using a combination of the :not() and next-sibling (+) selectors.
.row > :not(h1) + table
The rule will match any table element which is directly preceded by an element which is not an h1 which is an immediate child of an element with the class .row.
.row > :not(h1) + table {
border: 1px solid blue;
margin-top: 10px;
}
<div class="row">
<div>Some random div(s)</div>
<table>
<tr>
<td>This will match the rule</td>
</tr>
</table>
</div>
<div class="row">
<div>Some random div(s)</div>
<h1>Table Title</h1>
<table>
<tr>
<td>This will not match the rule</td>
</tr>
</table>
</div>
SASS ultimately compiles down to CSS, and according to the CSS rules, such a selector is not possible. You will have to do it via scripting (javascript, jQuery). There have been a lot of questions about this. Check these references:
Apply CSS styles to an element depending on its child elements
CSS selector for “foo that contains bar”?
Is there a CSS parent selector?
Finally, check this link for the reasons why we don't have the parent selector option.
so basically this is my layout. 3 row div (header content and footer)
what i want to do is emulate inside the content div a table format so i can display info as such
picture1 detail1
picture2 detail2
picture3 detail3
there are at least 10 rows of such info. doesn't have to be picture but can also be text
picture div will be about 150px while detail will be the rest. for the sake of example lets say 600px wrapper
i tried a few setups but it didn't come out the way i desired. in a table this would be a cinch but i would like a pure css table-less layout
something i tried but doesn't come out into columns
HTML
picture
item 1 goes here
picture2
item2 goes here
CSS
.itemwrapper{width:600px;}
picture{width:150px;float:left;}
item{width:450px;float:left;}
.clear {clear:both;}
please tell me how i can do this. jsfiddle example here - http://jsfiddle.net/4qvz220b/1/
table would be as simple as
<table width="500">
<tr>
<td width="150">picture1</td>
<td width="450">item1 goes here</td>
</tr>
<tr>
<td>
<td width="150">picture2</td>
<td width="450">item2 goes here</td>
</tr>
</table>
can someone point me in the right direction, i don't know much about css except what i can do through trial and error. the solution must be cross browser compatible css with no js or hacks etc.
please note that this is not to layout the entire page but just a two column content inside another div. if a unordered list can be used instead somehow, please let me know.
You almost got the structure right. You just need to use the right properties...
With css you can build the actual table structure using the display properties, as you have:
display: table
display: table-row
display: table-cell
And other, such as header and footer, if you use the right syntax.
So a basic example (without any style customization) would be something like:
FIDDLE LINK
<div class="mainwrapper">
<div class="itemwrapper">
<div class="picture">picture</div>
<div class="item">item 1 goes here</div>
</div>
<div class="itemwrapper">
<div class="picture">picture2</div>
<div class="item">item2 goes here</div>
</div>
</div>
css:
.mainwrapper {
display: table;
}
.itemwrapper {
display: table-row;
}
.picture, .item {
display: table-cell;
}
In my program, I have a text element that displays in 2 different sections. It will display is section A, and again in section B (popup). I was hoping to create 1 object using CSS that could be used for both sections. That way I could call the same object to check this element regardless of where it is displayed. I can't seem to figure it out. Maybe its not possible, or maybe I need someone who has more experience with HTML and CSS to show me the light.
Here is the HTML for this element in section A when it is displayed
<td id="treeCol" valign="top" style="overflow: hidden; display: block;">
<div id="orgTreeAndSearch">
<div class="orgSelection">
<span id="selection" class="" title="Select an org unit">Select an org unit</span>
Here is the HTML for this element in section A when it is NOT displayed (hidden when section B is displayed)
<td id="treeCol" valign="top" style="overflow: hidden; display: none;">
<div id="orgTreeAndSearch">
<div class="orgSelection">
<span id="selection" class="" title="Select an org unit">Select an org unit</span>
Here is the HTML for this element in section B when it is displayed
<div class="blockUI blockMsg blockPage PopUp White" style="z-index: 1011; position: absolute; padding: 0px; margin: 0px; width: 1365px; top: 50px; left: 50px; text-align: left; color: rgb(0, 0, 0); border: 0px none; background-color: rgb(255, 255, 255);">
<div class="White" style="margin: 0px 20px 20px; display: block;">
<div class="PopUpClose" align="right">
<div>
<div align="center">
<table style="width: 100%;">
<tbody>
<tr>
<td valign="top" align="left" style="width: 410px;">
<div class="orgSelection">
<span id="dataAccessOrgSelection" class="">Select org unit(s)</span>
Here is the HTML for this element in section B when it is NOT displayed (hidden when section A is displayed)
<div class="White" style="margin: 0px 20px 20px; display: none;">
<div class="PopUpClose" align="right">
<div>
<div align="center">
<table style="width: 100%;">
<tbody>
<tr>
<td valign="top" align="left" style="width: 410px;">
<div class="orgSelection">
<span id="dataAccessOrgSelection" class="">Select org unit(s)</span>
To select the element in section A, I could use the ID and it will work
css=#selection
To select the element in section B, I could also use it's id and it will work
css=#dataAccessOrgSelection
I wanted to have 1 selector for this element, so I tried this. However, it selects both the displayed and hidden elements. So if I'm on section A, it will select the element for both A and B, even though B is hidden (and vice-versa)
div.orgSelection span[id]
Is there a way to have 1 selector for this element, that will only select the visible element? I could check for "display:none" in the style attribute, but I'm not sure how to do this when it is located in td for section A, and div for section B.
Okay, if I understand your question right, you need CSS selector valid for both A and B in visible state.
td#treeCol[style*=block] span#selection, div.PopUp>div[style*=block] span#dataAccessOrgSelection
A tiny explanation. Comma - is for logical OR in CSS selectors. Visible divs of yours have a part of their style attribute - block ([style*=block]). So for both selectors we find span with needed id being contained inside a visible div. If the sectors are not right enough, play with attributes a little more.
To be completely sure that your approach works, you should call the element location with this selector every time before checking its visibility to avoid StaleElementReferenceException, because, clearly, those elements are not the same
But, if I was you, I would check a specific logic and not the 'what if' case. You should know exactly when and what element should be visible.
As Alexander Petrovich mentioned, I would recommand to use to different element-selectors, because in my opinion, they are indeed different elements. In this case, you can find easy selectors with ids.
But if there's a valid reason for a one-selector-but-two-elements-constuct, you need to make clear, which parts of your dom may vary and which are stable. I'm not so firm with css, but I can give you some xpath expressions, if this helps:
//span[(#id='dataAccessOrgSelection') or (#id='selection')]
//span[#class='']
//span[contains(text(),'Select') and contains(text(),'org unit')]
//div[#class='orgSelection']/span
I guess you will be able to transform this xpath-selectors into css-selectors...maybe this pdf will help:
http://code.google.com/p/timger-book/source/browse/trunk/cheatsheet/Locators_table_1_0_2.pdf
I am doing this on my own personal browser, viewing a pbulic website. as such, I can't change their html. I am using chrome, and stylebot to apply the CSS style. I need a CSS solution to the following:
<tr class="bg_small_yellow">
<td class="row1" valign="middle" align="center" width="20">
<img class="icon_folder" src="/eaforum/images/transp.gif" alt="">
</td>
<td class="row1" width="100%">
<span class="topictitle">
<a href="/eaforum/posts/list/9578017.page" id="topic_link_9578017" title="SimCity Traffic">
SimCity Traffic
</a>
</span>
</td>
How can I apply color: gray; to the <a> link if and only if the <img> is class .icon_folder ?
Here is a jsFiddle page to play with. I want a solution only in the CSS pane. http://jsfiddle.net/hZr9b/
I am looking for something like this, but that actually works:
(td > img.icon_folder) + td a:link { color: gray; }
If the markup cannot be changed, then it is not possible using only CSS because the image and anchor aren't siblings, and there is no parent selector in CSS2/3 to help navigate between these two elements.
If they were siblings, it could be as easy as this:
HTML:
<img class="icon_folder" src="/eaforum/images/transp.gif" alt="">
SimCity Traffic
CSS:
img[class="icon_folder"] + a {
color:grey;
}
But as you mentioned you cannot change the markup in this instance, unfortunately you'll have to use JavaScript.
I'm using APEX 4.2 to build a Training Calendar for the organization I support at work. I am by no means an DBA or any kind of programming expert. I've been learning a lot through trial and error.
My calendar is built, but what I am trying to do is change how items display based on a column in my table. For instance, I have two project types: Project A and Project B. I would like these to have a different border color on my calendar display. Currently, I am using the below CSS code but this applies to all events:
<style>
.Day a, .NonDay a, .Today a, .WeekendDay a {
font: normal 10px/12px Arial,sans-serif !important;
padding: 2px !important;
border-radius: 4px;
-moz-border-radius: 4px;
background-color: #E5E5E5;
border: 1px solid #FF1414;
}
.Day a:hover, .NonDay a:hover, .Today a:hover, .WeekendDay a:hover {
background-color: #A3A3A3;
border: 1px solid #FF1414;
text-decoration: none !important;
}
</style>
I want to be able to alter this so that when PROJECT = A a certain style like above is applied, and when PROJECT = B a variation of the above style is applied.
Does anyone have any guidance on how I can do this? I'm open to suggestions.
Thanks you,
Christina
I don't know APEX, but what you need is to extend html elements (whatever it is, could be a <li/>, a <td/> or something else) with project-specific css classes. You did not show your HTML code, so I just guess the calendar is build with a table. If so, this could look like:
<table>
<tr>
<td class="NonDay">27</td>
<td class="NonDay">28</td>
<td class="NonDay">29</td>
<td class="NonDay">30</td>
<td class="NonDay">31</td>
<td class="Day WeekendDay">1</td>
<td class="Day WeekendDay">2</td>
</tr>
<tr>
<td class="Day">3</td>
<td class="Day">4</td>
<td class="Day ProjectA">5</td> <!-- see the class -->
<td class="Day ProjectB">6</td> <!-- see the class -->
<td class="Day">7</td>
<td class="Day WeekendDay Today">8</td>
<td class="Day WeekendDay">9</td>
</tr>
</table>
With this, you can style this classes like you did for the other classes:
.ProjectA a {
border-color: blue;
}
.ProjectB a {
border-color: red;
}
The question I can't answer is how to add css classes in APEX, but this question would better fit to oracles support forums or maybe to https://superuser.com/ because it's not a programming related question.
I have a table that assigns colors to the different projects, so when I pull the event from the calendar table, I join it to the project table and grab the color.
SELECT e.ID, ''||DESCRIPTION||'' DESCRIPTION, event_date FROM EVENTS e, project a
where e.project_id=a.project_id;
If you want to style the individual calendar entries you could apply a class in the SELECT statement like this:
select ...,
'<div class=project"' || project || '>' || description || '</div>'
as description
from ...
This would result in HTML for the entries like:
<div class="projectA">This is project A</div>
In SQL code add column PROJECT_TYPE returning type of your project.
In calendar properties change "Display Type" to "Custom".
in "Column Format" input something like
<span class="#PROJECT_TYPE#">#COLUMN_VALUE#</span>
Then define ProjectA style.