Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have HTML like this:
<div class="myList">
<select>
<option value="1">Item1</option>
<option value="2">Item2</option>
</select>
</div>
All the CSS is perfect. But then, when I use some AJAX, and then I do $('.myList').html(...), all the styling of the combobox disappears.
I tried some of the ideas in other threads, but none of them worked.
When you are call ($element).html you overwrite the HTML what is currently there, therefore you may actually be overwriting the HTML which sets the div (and therefore styling) use $(element).append instead, here is the API for .append() http://api.jquery.com/append/
Probably because you add your styles with jquery, so you add your styles in the html as an attribute with style="", you can add your styles in the css and with jquery just add the classes. And when you change the html add the classes again otherwise you'll miss the styling.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
HTML
<a class="link cta"> link </a>
CSS
.link, .cta, .blueText, .title{
color: cyan;
}
The browser see the class names (link, cta) in html first then find the style in css and then apply the style.
Or
It see the class names (.link, .cta, .blueText, .title) in css first then find those class name in html and then apply the style.
I believe it's more like the second. Basically:
Not necessarily in this order:
The browser parses the HTML and creates a bunch of objects called The Document Object Model, or DOM.
The browser parses the CSS. Each CSS block is made up of a selector and then a bunch of properties.
For each CSS block, the browser looks through the DOM for all the elements that match the selector and then applies the properties.
In your above example, the selector is a list of classes but there are other kinds of selectors.
Note that in real life things don't always work out in that simple order as things can be loaded late, etc.
Hopefully that is of some help...
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I'm learning HTML/CSS, and I've seen some examples like using .text-center for text-align: center; (in Bootstrap3).
That is a little bit strange for me, because these classes' css style will never change, so I have to change their class when I need to change their style. For example, if I have to change an element with class="text-center" to text-align: right;, I'll change the class it uses to class="text-right" instead of changing class text-center's style.
Is there a detailed reason to use these fixed classes?
If so what is the general rule for using/not using fixed classes?
It depends how you manage your css.
Many avoid inserting style tags or css classes in their html tags, to avoid spending too long modifiying it afterwards.
However, sometimes, you can't make your css specific enough to apply a "text-center" to a tag without changing it somewhere else. So adding it directly to your html tag will allow specific modification.
Using classes instead of style tags makes your code look cleaner and you have one less parameter to check when going through it.
I hope I answered your question!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
This is the page I am working with: https://books.fcostry.cz/
What I am trying to do is hide the searchbox (.vc-searchbox) on hover of the Books logo on the left upper side (.vc-headerlogo).
.vc-headerlogo:hover .vc-searchbox{ display:none; } is not working and I really don't know why.
I would like to do it using CSS but I am open to any solution. Thanks for any answer.
.vc-headerlogo:hover .vc-searchbox{display:none;}
Means that .vc-searchbox nested in .vc-headerlogo will not be displayed when overing .vc-headerlogo
In your page, this is not the case: .vc-searchbox is not in .vc-headerlogo, but after (they are sibling). In that case, use the CSS sibling selector +
In other words,
.vc-headerlogo:hover+.vc-searchbox{display:none;}
should work better
Since you are open to options, use jQuery
$(document).ready(function(){
$('.vc-headerlogo').hover(function(){
$('.vc-searchbox').hide();
});
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Element type descendant selection works:
form * div {...}
but I find that using classes does not:
.my-class1 * .my-class2 {...}
I.e. I expect a few elements to be selected by the "class descendant" selection form, but none are.
In my page I have two very similar DOM sub-structures generated by third party code that needs different styling, and I don't want my CSS to relying on that third party DOM structure.
What is the best way to style these two parts of the DOM?
You can use .my-class1 > .my-class2 to direct descendants.
Or you can use .my-class1 .my-class2 for any .my-class2 that is descendant of .my-class1.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm having trouble with my CSS.
It's not working even though it is linked correctly to my HTML
document.
The files are in the same folder.
Both files are saved in the correct format.
From what I can see, I don't see anything wrong or missing from the
CSS.
The CSS
The HTML
It doesn't look like your css matches your html, you don't have any of those tags in your html so the css wont do anything.
Your html references class="header" (btw you are missing quotes around your class in your html, you should add those in.) your css just has header
You should have .header { ... } not just header {..}
You're using header class.
It should be in double quote.
i.e
In css file you've not added dot(.) before class header.
Class should be added with dot(.) and id with hash(#)
Try this :)
In HTML5, header is a tag.
You can use it
Ref. http://www.w3schools.com/tags/tag_header.asp