.features img{...}
I understand .features is custom CSS class and div is HTML element. But I don't understand what kind of relationship this syntax will build between them?
This syntax doesn't build any relationship between the .features class and a div.
The style that you provided is styling any child <img> tag contained within a .features class.
Both of these would be valid and apply the given style to the image:
<div class="features">
<img src="myImg.png" />
</div>
and
<table class="features">
<tr>
<td><img src="myImg.png" /></td>
</tr>
</table>
If you wanted to specify that your class was only applicable to divs, you would need to change the declaration to:
div.features img { }
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.
ANSWERED!
I have some css overriding my tables but I don't know how to find it. I simply need images in my table to be at the top of the table. I use the code:
<td valign="top"><img src="../../../images/site/orangeBanner.png" alt="" width="259" height="62" class="imagePic"/></td>
But it does not work and produces this image of the orange bar in the middle. It should be at the top at the same height as "INSPIRE".
Here is the link to my full code: FULL CODE
Can anyone see why my valign="top" is not working? Is there anything to override the css?
Your td originally has vertical-align: middle specified inside the CSS. You can override it by using style="vertical-align: top;" inline inside the <td> tag containing your image. This should work perfectly:
<td valign="top" style="vertical-align: top;"><img src="../../../images/site/orangeBanner.png" alt="" width="259" height="62" class="imagePic"/></td>
This CSS rule is overriding it:
table, th, td {
vertical-align: middle;
}
Change it to top or add another class to that specific td tag.
Also you could add style tag to that td as follows:
style="vertical-align: top;"
I am writing my first CSS lines. I want to align all rows of the same block together but I am not sure how to do this. This is what I am trying to do:
Using regular HTML I would have created a table with as many rows as days and 2 columns. However since CSS is about separating content from presentation I think this violates the principles of CSS. I am thinking that the needed code will have the form:
<div>
<div>days</div><div>hours</div>
</div>
but I am not sure how the CSS should look like. I don't even understand the CSS defines exactly where to load the different areas.
Thank you
Always use table for table structured data, so that it can be easily styled using css like the way you wanted.
Also Table will be easier to understand when one looks at the source!
What if the developer later wants to have a striped row or a hover over effect on a row or a column? so use table and leave all the styling part to be dealt in CSS.
here is a typical html and CSS for your need, view it in jsfiddle
HTML
<table id="schedule">
<tbody>
<tr>
<td>monday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>tuesday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>wednesday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>thursday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>friday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>saturday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>sunday</td>
<td>closed</td>
</tr>
</tbody>
</table>
CSS
#schedule td:first-of-type
{
text-transform: capitalize;
text-align: left;
padding-right: 10px;
}
#schedule td:last-of-type
{
text-align: center;
padding-left: 10px;
}
I have created a fiddle that should solve your problem.
Here is the link to the fiddle
Below is the HTML and CSS Code
HTML
<div id="outer">
<div class="push-left">Monday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Tuesday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Wednesday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Thursday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
</div>
CSS
#outer{
width:170px; //width of the container
}
.push-left{
float:left; //pushes the element to the left
}
.push-right{
float:right; //pushes the element to the right
}
.clearfix{
clear:both; //clears any applied floats
}
Hope this solves your problem!
Try
dayshours
Then CSS
.holder{
clear:both;
}
.test{
width:200px;
}
The holder will keep the lines separate
And the test will define 200px or what ever width you want to each field
Either that or use tables
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 need the "overflow:auto" to be set on few html elements.
Is there a way to embed this within the html instead of defining the div in ie.
div.scroll
{
overflow:auto;
}
Instead of having the above code within a tags, Can the HTML elements have defined.
This seems not to work.
<body>
<div {overflow:auto;}>
<table border="1">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th
</tr>
</thead>
<tbody>
</table>
</div>
</body>
try <div style="overflow:auto;"> , hope I understood what you are asking !
It's much better practice to use your external css stylesheet document to define your css than to apply inline css to the actual html page.
Mu suggestion would be to define a class that only contains the overflow:auto css that you want to use here and apply that class to all of the DIV elements that you want it to be used with e.g.
.myclassname {
overflow:auto;
}
<div id="somedivID" class="myclassname"></div>
<div id="someotherdivID" class="myclassname"></div>