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
How can I target an element class with a space before? I am using a Slick carousel slider and it automatically drops in a space in one of my elements I have within.
Example:
<div class=" classwithspace">Read more</div>
Is this still read as
.classwithspace{color:red;}
Taking from the comment of sailens
The space will be not be part of class name, the browser uses the
spaces as separators instead of class parts.
.classwithspace{
background:red;
}
<div class=" classwithspace">Read more</div>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
Is this valid HTML/CSS?
<div>
<div style="display:inline-block; border:1px solid red">
<div style="display:inline-block; padding:5px">Test</div><br />
<div style="display:inline-block; padding:5px">Test</div>
</div>
</div>
i.e. is it considered OK to nest one inline-block inside another? I'm guessing not!
Quote from html validator:
Cases where the default styles are likely to lead to confusion:
Certain elements have default styles or behaviors that make certain
combinations likely to lead to confusion. Where these have equivalent
alternatives without this problem, the confusing combinations are
disallowed.
Examples:
1- <div> inside <span> (block inside inline element)
2- <textarea> inside <button>
If you consider inline-blocks either block or inline element by default, there would be no confusing behavior if you nest inline inside inline or block inside block. The only confusing combination is a block inside the inline element.
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
The
div[class^="test"]
selector will not match an element in markup if the element will be
class=" test-something"
(The intended selector had been generated on backend.)
The
div[class^=" test"]
is not an option.
Any suggestions?
What you did there ^= is:
'begins with..'
div[class^="test"] { }
which would work on something like this:
<div class="test and-some-class"></div>
<!-- only if the very first string in your class matches "test" -->
<!-- so, class=" test something-else" won't work
You would have to use the CSS Selector:
'contains..'
div[class*="test"] { }
which would work on
<div class="class test something-else"></div>
<!-- class name can be anything. "test" can be anywhere -->
Reference
CSS3 Attribute Selectors: Substring Matching
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 8 years ago.
Improve this question
Is it a good way to use anonymous block box instead block element? What are pros and cons?
<div>
Some text
<p>More text</p>
</div>
vs
<div>
<p>Some text</p>
<p>More text</p>
</div>
P.S. The question arose after reading this point http://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level.
You should use semantic markup, meaning using HTML tags that describe your content properly. Look to the CSS specs themselves, which say:
CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not.
I discuss this more on this article: http://phrogz.net/CSS/HowToDevelopWithCSS.html#semanticmarkup
In your specific case, if you use CSS to do something like p:first-line { text-indent:2em } it will not apply to your "some text" if you do not include the wrapper element. If you include the <p> then all styling that applies to paragraphs will properly appear.
(And you may wish to use a more appropriate element than <div>, such as <section> if applicable.)
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Am currently designing a website using bootstrap and so far I have come up with a very nice website that is supposed to respond but it doesn't when scaled down. I want the website to respond to the following screen sizes: 768x1024, 800x1280, 980x1280,1280x600 and yet I've read bootstraps docs of responsivenness and tried them but nothing has changed.
I created my own classes inside a getbootsrap template and even when I tried to put them inside;
<div class="col-md-4"><div class="andy-redbackground"</div>
</div>
even tried to get into the classes and insert:
background-size:cover;
but nothing worked out.
Try this code:-
<div class="row">
<div class="col-xs-4">
<div class="andy-redbackground"></div>
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I'd like to style a text box within a div that has a specified class:
<style>
.myStyle input[type="text"] {
width: 250px;
}
</style>
<div class="myStyle">
<input type="text">
</div>
This code doesn't work, is there a way to do this? (other than assigning a class to the text box itself).
There's nothing wrong with your CSS, just add </input> before the </div> and you'll be good to go.
Fiddle: http://jsfiddle.net/6zmNM/ (With JS to provide an alert for the width of the text box)