I have a div that I want to be clickable, so I've wrapped an "a" tag around it, as it is valid HTML 5 and made the div a block level element.
Now, the problem I'm having is styling content inside that div, as everything displays as a link, and despite trying numerous methods I haven't found a good solution for custom styling everything inside the div.
A reduced test sample can be viewed here:
http://codepen.io/anon/pen/aencq
So, my question is basically, what's the best way of styling elements such as h2 and p that are inside a block level div, that is wrapped with an a:link.
All you need here is:
a { color:black; text-decoration:none; }
Sometimes you'll want to get more specific and then you can be like:
a h2 { color:red; }
Basically what is happening to you is that all elements under <a> tag are inheriting css properties of a hyperlink (underline, blue color, etc)
To counter this create an id or class on your tag and remove/override the default anchor properties.
For example to remove the underline you do:
text-decoration: none;
After that override Link-related pseudo-classes: :link, :visited, :hover and :active.
The best way is a matter of opinion. To me the best way would be to use the most succinct CSS as possible. Use only the specificity that you need. For example don't use a div h2 when a h2 is all that's needed. Also FYI you can do something like a.block { display:block; } and then you won't need the div in the markup.
Related
Is it possible or the best practice to avoid putting a class on a span which is nested inside a div?
I have the stereotypical 'to-do list' learning project and I need to line-through the item when clicked on but I also have a span element in there which will later be a delete button to remove the entire li.
<li><span class="deleteBtn">X</span> Birthday Cake</li>
At the moment the line-through is obviously targeting the span as well, so I'm wondering if there's a simple way to avoid it without a hack, otherwise I'm guessing I probably need to make the text a separate span and apply the line-through class to those span's
Is it possible or the best practice to avoid putting a class on a span which is nested inside a div?
Yes it is possible.
li > span{
/* styles */
}
Is it best practice? Not necessarily. I've found its helpful to have sub classes within divs or spans. Gives you greater control, even if you're not using them, for future development it might make your life easier.
Check out CSS selectors here, should give you a better understanding of what you can achieve. Regarding my example above, the first child of a li element has to be a span for that styling to take effect. Doing the following will apply to any span within an li element regardless of nested amount.
li span {
/* styles */
}
EDIT:
After seeing your comment, I think what I put still stands, however you should wrap your inner text in an element, another span should do it.
<li>
<span class="deleteBtn">X</span>
<span class="ItemText">Birthday Cake</span>
</li>
This will give you the ability to add your CSS in the following way.
li > .ItemText{
<!-- styles -->
}
It may seem over the top, but like I mentioned before it will give you greater control, I wouldn't consider it bad practice.
Here is my solution ! you can use < div >< /div> or < p >< /p > tag like the following:
<li><span class="deleteBtn">X</span><p class="to-do-list"> Birthday Cake</p></li>
and then insteed of applying your CSS to all < li > , you just need to apply it to your .to-do-list class
Hope this help ! Feel free to let me know is you have any questions !
Basically, I'm looking for the cleanest way to modify the styling of some text that i have in the application views without having to reprogram them.
I have a lot of section that does not have any tag (text without tag in the view).
Is there a way to apply styling to that specific text? (Solution for the short term, before I redefine correctly the tags in the while views)
Except for a small number of narrowly defined places, you can't apply CSS to anything other than an element.
So: No, there isn't.
You cannot add style to a something that doesn't have an element. A simple div tag can change that, and its a really easy and quick fix. Just div a section, give it an id or class, then modify it using css.
if you want to modify the first line you could use:
p:first-line {
font-weight: 700;
color: green;
}
otherwise you'll have to wrap the text in a tag. Other psuedo elements you could use are here: http://www.w3schools.com/css/css_pseudo_elements.asp
i'm using wordpress and i have an element i want to style... it's called...
<h2 class="widgettitle">
now, i know i can do,
h2.wigettitle {
whatever:css;
}
however, the problem i have is that i have multiple widgets with the same title and it effects all of them.
but, this h2.widget title is within another div called "headerarea".
so, in my file it's like...
<div id=headerarea">
<h2 class="widgettitle">
whatever title
</h2>
</div>
so is it possible to make this specific element do something like, #headerarea.h2.widgettitle or something in my element?
i tried styling the outer div independently, but the inner div is still grabbing styling from somewhere else, so i need to override all of them.
hope this makes sense... thanks for any help guys.
Use #headerarea h2.widgettitle. Including a space means to look in the children. If you include a > this means only look in direct children. Note that if your overrides do not work, add !important at the end to ensure they will override any other styles applied.
You can use the child or descendant selectors to accomplish this. Child selector > #headerarea > h2.widgettitle select h2 elements with class widgettitle that is a child of element with id headerarea. Descendant selector a space #headerarea h2.widgettitle select h2 elements with class widgettitle that is a descendant of element with id headerarea.
Also see http://www.w3.org/TR/css3-selectors/#selectors
#headerarea .widgettitle {
/* Put your styles here */
}
Is there any way to get a .body_content p:first-child {yada yada} to work if there are elements that come before the first <p>?
Like an H1 or H2
Trying to find the answer for: http://twitter.com/jackmcdade/status/2673916752
We need to target the first p's font-size in a div, even if there are html elements before, such as an h1 or h2.
If the P isn't the first child, why would you want to apply rules as if it were? What exactly are you trying to accomplish? If you want to apply rules to only the first paragraph, you can do so with jQuery and the following code:
$(".body_content p:first").addClass("blueStuff");
Which would add a class called 'blueStuff' to the first paragraph tag within .body_content.
You could possibly use:
p {
/* style as you'd like the first <p> to appear */
}
p + p {
/* style as you want other <p> tags to appear, selects a <p> that is a sibling of another <p>; I think it should style all subsequent instances of the element */
}
Is there an "invisible" tag in HTML (4) that I can use to make CSS distinctions
tag.myclass tag.mysubclass h1 { }
without having any visual impact on the HTML rendered?
My background is that I have areas in a form that belong to different groups. As I am opening those in lightboxes (long story involving DOM operations and such, not really important) I don't want to rely on the usual div class=x or span class=y to style the subsequent elements, as I would have to reset margins here, paddings there, and so on.
A layout-neutral wrapping tag would be just what I need in such situations.
No, there is not.
(And that's because such an element wouldn't really fit into the rest of HTML. The only reason DIV and SPAN affect the surrounding area is because they're block and inline elements, respectively. What would an 'invisible' element be? If you need something that's completely independent, absolutely (or relatively) position it and give it a higher z-index.)
If you want to group elements use a div or a span tag as a wrapper element. Apply your id or class to this, and style it accordingly.
EDIT
There isn't an 'invisible' tag - but margins and padding can be easily reset 'margin: 0; padding: 0;'
While all browsers give default styling to many HTML tags, at it's core HTML only describes data, it doesn't format it.
What you're probably looking for is a DIV tag, because no browser gives any default styling to that tag.
I think you want a <fieldset>.
I'd say a span tag is as neutral as they come. I don't think there's any browser that applies a margin nor a padding and it just wraps around it's contents.
I suspect you can use <object> tag without usual attributes for that purpose, but I haven't tested it thoroughly yet. It's even in HTML5 (unlike FONT tag).
The right answer is use a div tag and define a class for it. Here is an example:
<h2 style="font-size: 14px">Project 1 - Project 2
<div class="username">{% if request.user.is_authenticated%} Welcome {{request.user.username}} {% endif %}</div>
</h2>
then in your css file you can have a class like this:
.username {
color:white;
float:right;
padding-right: 100px;
}
voila!! It all belongs to h2 tag but the user name has a different css applied.
You can add display: none; to it. That won't display it (obviously).