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
Scenario: I have created a class name it pbox with its own border and background and shadow etc. to wrap product image and title . I use the exact same styles for last news to display last news image and title. When I review the website I decide to edit the background color for last news (not for products). When the project is big, I may forget that pbox is used also for products. How do you manage this situation?
1- Produce new class name for every different series of objects? Do you create 20 similar classes when you have 20 different type of content with image and title?
2- produce a new class name when I am editing an existing class and leave the old one unchanged? (even it is not used elsewhere; How do you make sure if this class is used elsewhere?) So do you have a lot of unused classes in your project?
Well you can handle the situation using its parent class like this
Here both product and news block has the same weighed block class pbox
By calling the parent of the news block .news you can edit the background of its child
.pbox{
width:50px;
height:50px;
background:green;
border-radius:7px;
}
.news .pbox{
background:red;
margin-left:15px;
}
div{float:left;}
<div class="products">
<div class="pbox">
</div>
</div>
<div class="news">
<div class="pbox">
</div>
</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 2 years ago.
Improve this question
First-time poster, owner of a small business. I'm a novice who edits code to tweak the site. I'm not a developer. Please be gentle.
My site displays dates for news posts (good) and for my FAQs (not wanted).
The div class is the same for both, so when I hide the FAQ date, the news post date gets hidden as well.
I'm trying to figure out how to select more specifically. The "article" level contains the most specific tag that pertains specifically to the FAQ.
Can I select by article class and work my way down? I believe that should be possible, but if it is, I can't figure out the syntax. Below is NOT the syntax I've attempted; it's just to illustrate the hierarchy:
article class="faq"
header class="generic-header-name-thats-found-elsewhere-in-site"
div class="generic-div-name-also-found-elsewhere"
div class="generic-child-div-name"
ul class="generic-ul-class-name"
All I want to do is hide that unordered list class if it happens to occur with the "faq" article class. It would be cleaner if my news posts and faq posts used unique tags, but they don't, and dealing with that is well beyond me.
Apologies if I've transgressed any typical conventions for asking questions in this forum. Help with this will be much appreciated. Thanks!
just chain them together to get to the ul
article header div div ul{
background-color:red;
}
How to select a ul - within a div - within another div - within a header - within an article class
<article>
<header>
<div>
<div>
<ul>
<li>test</li>
</ul>
</div>
</div>
</header>
</article>
I think this should do it:
.faq ul {
//your css
}
I think you can try like this ".faq .generic-header-name-thats-found-elsewhere-in-site .generic-div-name-also-found-elsewhere .generic-child-div-name .generic-ul-class-name" .
and if it still doesn't work so I need a full code to debug.
I hope it helps 👍
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>
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 7 years ago.
Improve this question
I've been trying to find a good, simple solution for this for days now, and I'm coming up empty handed.
I'm trying to make a blog in wordpress, that currently has excerpt with images on the front page. The images are not featured images and they link to the full post. What I really want is for "read more" to appear when i hover over the post image on the front page.
Ideally, I would love to implement one of these codrops hover effects (http://tympanus.net/Development/HoverEffectIdeas/) on the post images if it's possible. I'm very much a newbie to wordpress, so I don't know where to put what code.
But any help would be greatly appreciated.
Try below core code of HTML and CSS:
<style type="text/css">
div.texthover
{
display:block;
position:relative;
width:150px;
}
div.texthover .overlay
{
position:absolute;
top:45%;
width:100;
width:150px;
background-color:rgba(0, 0, 0, 0.3);
display:none;width:150px;
}
div.texthover:hover .overlay
{
display:block;
}
</style>
<div class="texthover"><br />
<img src="image.jpg" width="150" height="150" />
<div class="overlay"><br />
<span>This is some text I want to display</span>
</div>
</div>
In WordPress, go to Appearance -> Editor and edit style.css or your main .css theme file. You can put there your hover code. You also need to add the corresponding classes to your image. However if you want "read more" to appear you would need the existing associated HTML code. On another hand, you got some hover plugins available, I found this one with a quick search : https://wordpress.org/plugins/amazing-hover-effects/
Good luck.
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>