This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS 3 content selector?
I was wondering, is it possible to select an element based on its content with CSS?
I realize I can use something like this:
.this[href="./foo.php"] {
/* And the styles... */
}
But is there a way to select based on inner content?
So if I have this:
<p>[ Continued ]</p>
How can I select it based on it's content, [ Continued ], if I can?
No, not with CSS, and there really should never be a need too. If you're making a "Continued" button, link, or whatever: specify a class, maybe an ID, or even use an attribute, and select it. There really is no need for a content selector with how many options you already have.
Not to mention, not adding a class or some kind of identification to this link makes it look like regular text within the document, possibly removing some of its semantic meaning. Giving it a separate class makes it stand out. If I give a link the class "button," that makes it stand out from the rest of the links on the page, saying "I'm a button, not just an ordinary link." Selecting based on the content does nothing of the sort; it's just another link.
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 2 years ago.
I have:
<div id="header"><button id="button1"/></div>
<div id="footer"></div>
Can I change (just in css, not js) the layout so button1 belongs to footer?
If this is not possible are there alternatives? (such as flex order allow dynamically to change the order of elements). My goal is to propose many different themes of an application without to modify the DOM layout (e.g. some people want the button to be in header, other prefer in footer).
Can I change (just in css, not js) the layout so button1 belongs to footer ?
In a word, no.
What you are trying to do is change the actual structure of the page, which is not what CSS is for. CSS is (for the most part) about controlling the visual aspect of a web page, and HTML is for the structure. You could, I suppose, apply CSS styling to make the button appear as though it were a child of #footer (you might set position: relative and give it the appropriate offset so that it appears where it would have appeared if it were), but that’s hardly a reliable solution.
If you find yourself needing to do this, perhaps pure CSS is not really the appropriate solution? Could you offer the themes in the form of styles and scripts (where you could use the script to move the button)? Or perhaps offer HTML templates to be chosen from (e.g. whether the button should be in the header or footer), and then apply the CSS theme on top of that.
This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Why are my CSS properties being overridden/ignored?
(5 answers)
How can I detect overwritten css properties?
(3 answers)
Closed 3 years ago.
I am using timeline.js to add a timeline to my page. Unfortunately the width of an element with class .tl-slide-content is set somewhere I cannot see. As a result, the width is 940px or 448px depending on viewport width. This is causing issues with how the text next to the photo is being displayed.
I have tried selecting the element with every ascendant class available, including any IDs that I could find. Still there is no change and I am unable to figure this out.
What I want to know is this:
what is 'element' in this context?
are there tools in the developer console that enable me to find where width is being set to 940px?
If anyone has any experience with this particular library and could point me in the direction of the appropriate selectors that would be fantastic
I have tried putting my stylesheet after the timeline, I even tried putting it right at the bottom of the body tag. Still no change.
The 'element' selector is displaying all the properties set by the inline styling within the HTML file itself. Inline styles supersede all other styling because of cascading (first to last). Last iteration is displayed.
You can see the word inline to the right of the 'element' box.
If you do not have write access to the HTML file you are working with then you may need to use !important after your width: 100%. This is really a last resort.
My suggestion is to look at their CSS source code:
https://github.com/NUKnightLab/TimelineJS/tree/master/source/less
Overwriting their CSS would just bloat your code.
Duplicate the library(if you intend to use it again) and then use the duplicate to internally mess with their source code to achieve the results you want.
I know I didn't give you a direct answer, but libraries typically have their own conventional styling, etc. without looking at the source you're just guessing...
This question already has answers here:
What's the difference between an id and a class?
(17 answers)
Difference between id and class [duplicate]
(2 answers)
Closed 7 years ago.
I'm new to CSS, and after learning about ID selectors, the only difference between them and class selectors is the fact you can only have one specific id per element, whereas multiple elements can share the same class name. But then it's easy: name an element a class name that you won't use for any other element. So it seems in that sense, a class can be treated as an I.D.
I'm new to CSS, so I may be missing something here. What advantage do I get using an ID selector over a class selector in a particular case?
Thanks.
Here are a few reasons that come to mind:
Direct Linking.
You can link directly to a specific element on the page by adding the id to the end of the url. See this post for examples: Link to an element within the current page
Javascript Compatibility.
A lot of JS libraries utilize the differences between classes and IDs. For example, they will treat classes as an array of elements, assuming you want to iterate over all of the instances of that class. IDs on the other hand are assumed to be singular, and whatever functionality you are trying to achieve will look for only a single instance. This has minor (almost unnoticeable) performance benefits, but can also break many functions if not used correctly.
Specificity.
When targeting elements on a page, specificity always comes into play. Since IDs and classes have different weights, using them incorrectly can cause problems when you are trying to keep styles from over-writing each other. See here for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Browser Compatability.
While browsers are getting better at conforming to modern CSS standards, there are always going to be quirks. Not every selector works in every browser and some CSS tricks may break when your users visit your site using an old version of IE or some random build of Safari. That being said, IDs will always work, no matter what. This may not relate to your specific case, but could help prevent headaches down the road.
Best Practices/Readability.
Most importantly IMO, is the readability aspect. When looking over another developer's code, I assume when I see a class being specified in the CSS that whatever styles they have set will affect multiple areas of the page. This means I shouldn't just go changing things without further research. Opposite of that, if I see an ID being used, I can assume that any changes to that particular style will affect only that one area, and there shouldn't be any surprises for me down the road.
This question already has answers here:
Is it alright to use multiple h1 tags on the same page, but style them differently? [closed]
(15 answers)
Closed 8 years ago.
Here I am again, asking the same question I asked a few months ago. But no, I don't believe this is a duplicate, because there are so many contradicting answers on this that I find it difficult to determine the correct one.
seroundtable.com says,
H1 tags should be used for what they were originally created for: organizing your documents to stress the key points.
That being said, it would be illogical for search engines to not think that a h2 is of lesser importance than a h1.
ehow.com says this,
it is recommended that a page should always have an H1 element, but only one. The H1 tag should include the main keywords targeted within the page.
So that right there contradicts an answer provided to me on S/O a few months ago. The answer that was provided went along the lines of, 'You can have as many h1 tags as you like' (I was asking a question about how to use them when I need more than 6).
So now I am confused.
I believe that by using many h1's sends a less-than-clear message to the viewer and search engines. But I also feel dirty making a p tag 28px;
What should I do? The issue here is, this is a unique design, and all 5 main navigation links are spread horizontally and are all the same size. I want to use a h1 for them all, I do not want to use h1, h2, h3, because all links - in this case - are of equal value. What I mean is, you wouldn't dare try to pass one page off as less important than the other.
you can have as many h1 tags as you want in a page (w3c specs).
in your case however i would recommend using a list or for the navigation menu (wrapped in a nav element if you're using html5). The links to other pages aren't headings or the most important elements on your page.
you should reserve using h1-6 for actual headings.
You should look into using an HTML list. It seems like you are questioning what HTML element is most semantically correct, and from my experience the most semantically correct way to do navigation is using a list.
But other popular developers like Chris Coyer the author of CSS-TRICKs says he uses listless navigation. Navigation in lists to be or not to be.
If your site is going to used by lots of people, using a list will help those with disabilities and use screen readers to consume your website.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 9 years ago.
I am creating a print stylesheet and would like to hide all figure tags only if that tag contains an iframe, which happen to be embedded YouTube videos. If the figure tag contains anything else (i.e. an img), I want the tag and its contents to still be shown on the printed page.
I know that I could simply apply a class of "video", for example, to my figure tag where appropriate, but I want to see if there is a way to accomplish this via CSS without resorting to adding classes throughout my site. Also, even though I know they exist, I am not looking for a jQuery solution.
Thank you!
You are looking for a parent selector
CSS3 has none, but CSS4 has one that is like selecting using $.
Here are some similar questions with similar results:
Is there a CSS parent selector?
CSS Parent/Ancestor Selector
Complex CSS selector for parent of active child