I am trying to access only the ELEMENT for toc-chapter number (1 in this case). The element is in nested classes. I've used this approach on toc-section and was able to produce the wanted result.
Css:
.book .toc {
& > .title{
font-size: x-large;
font-weight: bold;
padding-bottom: .25em;
margin-bottom:.50em;
border-bottom: 1px solid #tuscany;
}
& a.target-chapter{
.cnx-gentext-n{
&:before{content: "testing";}
}
color:red ;
}
}
HTML:
<div class="toc">
<div class="title">
Table of Contents
</div>
<ul>
<li xmlns:d="http://docbook.org/ns/docbook" xmlns:db=
"http://docbook.org/ns/docbook" xmlns:pmml2svg=
"https://sourceforge.net/projects/pmml2svg/" xmlns:c="http://cnx.rice.edu/cnxml"
xmlns:ext="http://cnx.org/ns/docbook+" xmlns:svg="http://www.w3.org/2000/svg"
xmlns:mml="http://www.w3.org/1998/Math/MathML" class="toc-chapter">
<a href="#idm3792312" class="target-chapter"><span class=
"cnx-gentext-chapter cnx-gentext-autogenerated">Chapter</span> <span class=
"cnx-gentext-chapter cnx-gentext-n">1</span><span class=
"cnx-gentext-chapter cnx-gentext-autogenerated">.</span> <span class=
"cnx-gentext-chapter cnx-gentext-t">Aging and the Elderly</span></a>
Based on your provided info, I would assume that LESS is producing the following css selector (I have not actually recoded your problem in LESS, this is just my interpretation):
.book .toc a.target-chapter .cnx-gentext-n:before {content: "testing";}
Which should work based on this fiddle. I will assume you are testing in a browser that supports :before (not some old version of IE). So to trouble shoot this, you need to:
Verify that such a selector is in fact being produced.
If NOT, determine what selector string is in fact being produced by your code (if any), and that may lead you to solving your issue.
If such a correct selector string is being produced, then you need to look at other css (which you have not posted, so I am merely speculating here):
Is some more specific (which seems unlikely) selector string targeting the same thing and overriding it?
Do you elsewhere set the display or color or visibility or some other property on that :before pseudo-element that in fact "hides" the added "testing" from view?
Is your actual use case putting an image as content and are you seeing it not show up in printing (that would be a whole different issue)?
Basically, if your selector string is coming out correct, there are numerous other things that could be happening, and we would need more details to resolve it. If it is not coming out as above, then I would be interested in know what it is producing.
Related
I'm looking for a solution to not override styling on table cells during hover IF the cell contains a SPAN tag (this span also has a class applied named isThreshold) OR the div cell contains the class .row_select).
The following works and prevents the override if it contains .row_select, but finding a way to look ahead and see if it contains a span tag doesn't seem to work:
.webix_column > div.webix_cell.gridRowHover:not(.webix_row_select) { //this works
color: red;
}
.webix_column > div.webix_cell.gridRowHover:not(span) { //doesn't work
color: red;
}
EDIT
using the following I almost get there as it doesn't affect the cell, but specifically targets the span tag. Having it not affect the cell at all including the span tag is what I really need if the .webix_row_select and span tag are present.
.webix_column > div.webix_cell.gridRowHover:not(.webix_row_select) > span
//Markup
<div role="gridcell" aria-rowindex="1" aria-colindex="4" aria-level="1" class="webix_cell">
<span class="isThreshold">1</span>
</div>
<div role="gridcell" aria-rowindex="2" aria-colindex="4" aria-level="1" class="webix_cell
row_select">
<span class="isThreshold">1</span>
</div>
Any ideas how I can account for both scenarios onHover? The class .gridRowHover is dynamically injected on hover which is what I have been using to target things.
Thanks in advance
Ok, I discovered that !important was hosing things for me and dropping them and simply targeting the table cell on hover was sufficient enough to do what I needed. And this is why you dont use those (!important) unless you really need to do so.
Thanks to anyone that was looking at this.
I have a web code generated by an aplication (built in angular). It is a menu choice where I need to hide some of them. It looks e.g. like this:
<div class=first>
<div class=second>
<a href=href1>
</div>
<div class=second>
<a href=href2>
</div>
<div class=second>
<a href=href3>
</div>
</div>
Now what I need is to hide the div which contains a element with href2.
I can hide the a element:
.first .second a[href="href2"] {display:none}
But I need to hide the whole div element. I thought:
.first .second < a[href="href2"] {display:none}
that doesn't work.
I KNOW THE JQUERY SOLUTION with has function. The problem is I can only adapt css files of the application. If i'm right I cannot use jquery in css file.
Please...any Idea how to do this ?
thanks a lot for help
best regards
Marek
At the moment there is (sadly) no way to adress the parent element with CSS.
I don't know your layout or CSS Code but maybe you can just structure your HTML-Code in a different way.
Edit
And now I understand your question...
To hide (for example) the 3th .second div you don't need to adress it from the child element but from the parent element.
What you are probably looking for are the nth selectors,
for instance: nth-child() or nth-of-type().
You can find more info here.
Also, you should probably take a look at the basics of HTML and CSS.
In your code you have not closed the <a> tags or wrapped the values of the attributes in quotation marks.
Wrong:
<div class=first></div>
Right:
<div class="first"></div>
To hide (for instance) the first element you could use the :first-child selector or the :nth-child() selector. Since you will probably use the nth-child() selector this would be:
.first > .second:nth-child(1) {
display: none;
}
I experimented with using the :only-child pseudo-class but unfortunately this does not seem to consider the text nodes:
<style type="text/css">
div span:only-child {
color: red;
}
</style>
<div>
Test
<span>This still becomes red :(</span>
</div>
<div>
<span>This becomes red, as it should!</span>
</div>
<div>
<span>This does not become red - great!</span>
<span>This does not become red - great!</span>
</div>
I am trying to find a way to detect when a specific element is completely alone within its container element in a situation where I am unable to introduce new classes.
Is there a way to achieve this with CSS?
Is there a way to achieve this with CSS?
Unfortunately, not.
Included in an old revision of the CSS Working Group "mistakes" list is missing the idea that..
No naked text mixing with elements. All raw text should have an addressable, stylable element wrapping it, created by CSS if necessary.
Current list
Text Nodes are not element and CSS can't select (or ignore) elements that don't exist.
So, it's probably best practice to always use a text element when incorporating text in a page...you never know when you might need to style it.
div:nth-child(2) span {
color: red;
}
https://jsfiddle.net/cmckay/8663aLcg/
I'm using this good script from CodyHouse to set up a filterable portfolio: http://codyhouse.co/demo/content-filter/
I'm using AngularJS to parse data via JSON and everything is fine, except for the fact that the CSS is not applied properly to the dynamically loaded elements.
You can see the differences in this image:
As you can see, the first row, which is loaded via Angular, has no css applied at all. The second row, which is already placed in the HTML, is working fine.
How is it possible? All the elements in both rows have the same CSS selectors and the same CSS rules applied.
Here you can find a Plunker: http://plnkr.co/edit/mFtMpm5CJOiPcu3tRVOj?p=preview
This is the generated markup from Angular:
<li class="mix color-1 check1 radio2 option3 ng-scope" style="display: inline-block;" ng-repeat="drawing in drawings"><img src="img/img-1.jpg" alt="Image 1"></li>
And this is the html static markup:
<li class="mix color-1 check1 radio2 option3" style="display: inline-block;"><img src="img/img-1.jpg" alt="Image 1"></li>
This is the css applied:
.cd-gallery ul { text-align: justify; }
.cd-gallery li { width: 23%; }
There is absolutely no difference between them and I'm getting a bit crazy on this. It's the first time that I get issue with css applied on dynamic and static elements. Thanks in advance for any help.
Ok, I found the solution to the problem.
Basically the whitespace between the (necessary for the justification) is not emitted with Angular's repetition so you also have to wrap the whitespace so it gets repeated, like:
<span ng-repeat-start="drawing in drawings"></span>
<li></li>
<span ng-repeat-end></span>
Thanks to this thread: Angular: Why doesn't CSS justification work with ng-repeat?
Of course it's not optimal, because it forces you to add a ton of useless markup but at least it works. If anyone can suggest a best solution it will be appreciated.
Since the font tag in HTML is being deprecated in HTML5 (and I understand why) is there a clean solution for applying certain attributes and styles to only portions of a paragraph text? I'm using JavaScript to parse an XML file that relies on the fact that the font tag allows portions of wrapping text to be formatted using class-based CSS. I realize the "anchor" (a) tag could also be used for this purpose, but that way seems very backwards and unnatural.
EDIT
When I asked this question (a couple years ago now) I was failing to understand that every DOM element falls into a display category, the two primary categories being:
block - insists on taking up its own row
inline - falls in line with other inline elements or text
HTML offers two generic container elements, each of which by default adheres to one of these display values; div for block display, and span for inline display.
The span element is the perfect way to designate a certain chunk of text and give it a unique style or ID because you can wrap it around part of a larger paragraph without breaking the selected contents into a new row.
The span tag would be the best way.
Although inline CSS is typically not recommended, here is an example:
<p>
This is my <span style="font-weight:bold">paragraph</span>.
</p>
span and div are similar, but the div tag is a block element, so it will cause line-breaks. span is an inline tag that can be used inline with your text.
HTML:
<span class="yourstyle">
Text in your style
</span>
CSS:
.yourstyle {
color: red;
}
you could use a <span> tag
<p>here is your paragraph text and it goes on and on and on..... and now
lets start some <span>formatted text.</span> here is another<span>section
of formatted text</span> here is unformatted text<p>
you can either do inline styles such as <span style="color: #000000; font-family: calibri, arial, helvetica;"> or you can just apply a class to your span, like <span class="textformat1" and <span class="textformat2">. then just apply different css rules based on the class.
.textformat1 {
color: red;
}
.textformat2 {
color: blue;
}
hope this helps
Always use css files to hold your code which will be considered "universal" for each element you set. When you want to set for a specific, lets say <span> element. You would do just as Adam Plocher said above, use the style="" attribute for the <span>element.