I have this div
<div>
Questions about these terms
<ol class="alphabetical">
<li>
<div>If you have any questions about these terms or the Platform, you may contact us by email at
support#example.como.</div>
</li>
<li>
<div>Our VAT number is {vat}.</div>
</li>
</ol>
</div>
i have other divs
<div>
content here...
</div>
within the same document. I want to bold this text in particular
**Questions about these terms**
<ol class="alphabetical">
that occurs just before this class <ol class="alphabetical">
and this doesnt work
.alphabetical::before {
font-weight:bold !important;
}
Is there a way i can target the text in plain css?
Different ways to do this, some methods are
Wrap text you want to be bold i html <b></b>-tags
Wrap text you want to be bold i html <span></span>-tags, then style that span with css
Set font-weight on parent div, then use font-weigth: initial; on the ol-element selector.
You can not access this text with that selector.
Instead, wrap it to another inline element like span, b, or others, and then get this element with selector:
span.header {
font-weight: bold;
}
<div>
<span class="header">Questions about these terms</span>
<ol class="alphabetical">
<li>
<div>If you have any questions about these terms or the Platform, you may contact us by email at
support#example.como.</div>
</li>
<li>
<div>Our VAT number is {vat}.</div>
</li>
</ol>
</div>
See: How ::before works.
Update:
If you want to get this text without wrapping it you can use this:
<div class="container">
Questions about these terms
<ol class="alphabetical">
<li>
<div>If you have any questions about these terms or the Platform, you may contact us by email at
support#example.como.</div>
</li>
<li>
<div>Our VAT number is {vat}.</div>
</li>
</ol>
</div>
/* Selects each <div>, but only if it is the */
/* only <div> element inside its parent */
/* without container class */
div:only-of-type {
font-weight: bold;
}
div > * {
font-weight: initial;
}
Just wrap the text in a div or p (or both) and give that a class and style it. For example:
<div>
<p class="foo">Questions about these terms </p>
<ol class="alphabetical">
<li>
<div>If you have any questions about these terms or the Platform, you may contact us by email at
support#example.como.</div>
</li>
<li>
<div>Our VAT number is {vat}.</div>
</li>
</ol>
</div>
And the css:
.foo {
font-weight: bold;
}
Related
In the picture its shown that the 2 sets of list aren't at the same height or width. I am new to html/ccs and I cant figure how to fix it.
I've already tried to chance the margin to 0 instead of auto because i though it would solve the problem.
The line of code I've been told my mistake is placed in is this:
ul.lister {
display: inline-block;
text-align: left;
margin-top: auto;
margin-buttom: auto;
}
<ul class="lister">
<p><big>Jeg ønsker mig... (snacks edition)</big></p>
<li> FaxeKondi (gerne i ramme).</li>
<li> Saltede peanuts </li>
<li> Corny Müslibar m. banan og chokolade</li>
<li> MælkeChokolade</li>
<li> HvidChokolade</li>
</ul>
<ul class="lister">
<p><big>Jeg ønsker mig... (gavekort edition)</big></p>
<li> Sport24</li>
<li> Normal</li>
<li> Løvbjerg</p>
<li> Føtex</li>
<li> Lidl</li>
<li> Aldi</li>
<li> MacDonals</li>
<li> Netto</li>
</ul>
thanks in advance and sorry if there is some words that have been misspelled
First, you've got some errors in your markup: The only permitted content inside ul elements are the list item element (<li>). Inside list items you could put a <p>, but I would recommend to put the list heading outside the list for readability.
Then in your CSS, you've got margin-buttom, which should be margin-bottom.
Finally, there are several ways to put elements side by side in CSS and I will not tell you how to do that, but take a look at this article to get some ideas how you could solve it.
The two items aren't equal width or height because they'll only take up as much space as needed and that's dependent on the content width and height.
If you wrap each list item in a container and use display:flex then that'll make them appear side by side. You can then use flex-basis in the child elements to make them equal width. Finally putting paragraphs in unordered lists isn't great so I've separated them out and wrapped that block in divs of their own that can be sized appropriately.
CSS tricks is a good starting point for flexbox
There's also some syntax errors that I've corrected.
Also note that the big tag isn't supported in html5
See below
.container {
display: flex;
}
.lister {
flex-basis: 50%;
text-align: left;
margin-top: auto;
margin-bottom: auto;
}
<div class="container">
<div class="lister">
<p><big>Jeg ønsker mig... (snacks edition)</big></p>
<ul>
<li> FaxeKondi (gerne i ramme).</li>
<li> Saltede peanuts </li>
<li> Corny Müslibar m. banan og chokolade</li>
<li> MælkeChokolade</li>
<li> HvidChokolade</li>
</ul>
</div>
<div class="lister">
<p><big>Jeg ønsker mig... (gavekort edition)</big></p>
<ul>
<li> Sport24</li>
<li> Normal</li>
<li> Løvbjerg</li>
<li> Føtex</li>
<li> Lidl</li>
<li> Aldi</li>
<li> MacDonals</li>
<li> Netto</li>
</ul>
</div>
</div>
assuming i have a structure like this (and can't modify it):
<ul>
<li class="common"> <p>First A</p> </li>
<li class="common"> <p>Second A</p> </li>
<li class="common"> <p>Third A</p> </li>
<li class="common"> <p><b>SELECT ME</b></p> </li>
<li> <p>First B</p> </li>
<li> <p>Second B</p> </li>
<li> <p>...</p> </li>
</ul>
Is there a way to select the last element with class "common"? (in this case the fourth element)
First i tried selecting a subset with:
.common{
background: red;
}
and it worked correctly. So i tried selecting last-child of them, with:
.common:last-child{
background: green;
}
but not luck. i also would like to avoid adding a class for that element.
Jsfiddle
EDIT: i simplified classes and selectors to make it cleaner
Is there a way to select the last element with class "common"?
No, not with a CSS selector without modifying the HTML.
what about
.common:last-of-type {
background: green;
}
You can use JavaScript or jQuery
$('custom').prev().css('color', 'red');
If your not against a JS route you could do this
$('li.common.custom').first().prev('.common').css('background','yellow');
It finds the first element that has both .common and .custom classes and then goes to the previous element. So its technically the last element that only has .common
https://jsfiddle.net/89z20341/
Is the structure going to stay exactly as you have coded it? eg with the bold tags on the element you want to select?
if so could you just do this
.common p b{
background: green;
display:block;
}
http://jsfiddle.net/seLm589s/4/
I have a <ul> with a couple of <li>. In my css with li { display: inline; } I put the li elements in a horizontal order. The li elements contain a picutre and text. But now the picture and the text are also in horizontal order, but I want them to be under neeth each other. How can I do that?
<ul>
<li>
<img src="img/a.png" />
A
</li>
<li>
<img src="img/b.png" />
B
</li>
<li>
<img src="img/c.png"/>
C
</li>
</ul>
You will need to change your CSS as follows:
li {
display: inline-block;
}
li img {
display: block;
}
Here is a quick demo: http://codepen.io/anon/pen/VLLoEZ
This is not a bug but a normal behaviour. <img> tag is by default inline. You could solve this non-issue by either wrapping either your image or, better, your text into a block element. For example, a <p>tag for your text :
<ul>
<li>
<img src="http://placehold.it/140x100" />
<p>Your text here</p>
</li>
<li>
<img src="http://placehold.it/140x100" />
<p>Your text here</p>
</li>
<li>
<img src="http://placehold.it/140x100" />
<p>Your text here</p>
</li>
</ul>
jsFiddle
Note I use display:inline-block on li elements, taking advantage of both inline (putting things side-by-side, alignment,...) and block (fixed size, top/bottom margins) properties. Although it has a strange but easilly fixed "feature/issue", this is most of the time the best way to put elements side-by-side. display: inline or floating elements are also used but come with some other issues sometimes a bit trickier to be fixed.
For the navigation on a website I am making I am using a side bar that is set up using an unordered list. There are also multiple lists inside of lists. I used multiple div's too. I have now run into the issue that form inside of a div I need to set up some code that will contradict the div that it is in. In my case I have css of line-height: 35px; I need to edit this to become 15px.
Here is the code i need to edit it is the center( sub List )
<li>
<h2> Tech Ed. Classes</h2>
</div>
<div id="sidebarLinks"><!-- USE THIS DIV SECTION FOR A LIST WITH BULLET POINTS -->
<ul>
<li><strong><em>Main Page</em></strong></li>
<li>Construction</li>
<li>Drafting</li>
<li>Electronics</li>
<ul id="subList">
<li >INTRODUCTION TO ELECTRONICS</li>
<li>EXPLORING CAREERS IN ELECTRONICS</li>
</ul>
<li>Graphic arts </li>
<li>Manufacturing</li>
<li>Project Lead the Way</li>
<li>Transportation, Distribution, & Logitstics</li>
<li>Wood Working</li>
</ul>
</div>
</li>
You can do this simply by adding a css class to the elements you want to change to be different from the div they are in. For example:
li {
line-height: 35px;
}
.smaller {
line-height: 15px;
}
This CSS will make the line-height on all <li> elements equal to 35px, except for <li> elements with a class of smaller. Those will have a line-height of 15px. For example:
<ul>
<li>This will have a line height of 35 pixels.</li>
<li class="smaller">This will have a height of 15 pixels.</li>
</ul>
<ul class="smaller">
<li>This will have a line height of 15 pixels, the ul has a class of smaller.</li>
<li class="smaller">This will have a height of 15 pixels as well.</li>
</ul>
JSFiddle
I would suggest adding a more specific selector for the inner list. This method would not require any changes to your existing markup:
#sidebarLinks {
line-height: 25px;
}
#sidebarLinks #subList {
line-height: 15px;
}
Here is a fiddle demonstrating the above selectors: JSFiddle
What CSS makes <a> tags show on a single line, rather than under each other?
Maybe have a link in <li> tag?
I believe you want:
a {
display: block;
}
edit
Anchors by default show inline, but the related CSS is:
a {
display: inline;
}
You could also use inline-block which gives you a bit more functionality (although some older browsers support it poorly).
If you want a link in a <li> tag:
<ul>
<li>
Link here.
</li>
</ul>
CSS:
li {
display:inline-block;
}
Example here
I created an example for you which answers your second question.
<p id="top">This is the top of the file</p>
<ul> Favourite sports
<li>Football</li>
<li>Tennis</li>
<li>Rugby</li>
</ul>
<p>This link goes to the top</p>
The tag li refers to list item. Links are written the same way in ordered and unordered lists.