Remove lines with CSS - html

I'm using a plugin that has below output:
<div class="CUSTOM CODE">
<ul>
<li> line 1 </li>
<li> line 2 </li>
<li> line 3 </li>
<li> line 4 </li>
</ul>
</div>
The problem is I need to keep single line for example line1. I can control CSS classes only. Is is possible to do this job through CSS class?


Try using this kind of code.
.CUSTOM ul li:nth-child(2){
background:black;
}


You can use a combination of :not and :first-child
.CUSTOM li:not(:first-child){display:none;}
<div class="CUSTOM CODE">
<ul>
<li> line 1 </li>
<li> line 2 </li>
<li> line 3 </li>
<li> line 4 </li>
</ul>
</div>
This may not work in IE 8 or IE 7 : http://caniuse.com/#feat=css-sel3


At css, example changing line1:
ul li:nth-child(1)
{
/* example */
color: green;
border:2px solid black;
padding:6px;
}
Or at html, example changing line4 :
<div>
<ul>
<li> line 1 </li>
<li> line 2 </li>
<li> line 3 </li>
<li style="color:blue;padding:6px;"> line 4 </li>
</ul>
</div>


try this...
.CUSTOM.CODE li:first-child {display:none}
<div class="CUSTOM CODE">
<ul>
<li> line 1 </li>
<li> line 2 </li>
<li> line 3 </li>
<li> line 4 </li>
</ul>
</div>

Related

How to style the immediate child of multi level list?

I have a multi-level ul list like below.
<ul>
<li>
</li>
<li>
<a href="/">
</a>
<ul>
<li>
<ul>
<li>
</li>
<li>
<ul>
<li>
</li>
<li>
</li>
</ul>
</li>
</ul>
</li>
<li>
</li>
</li>
</li>
</ul>
There could be more levels inserted.
So I want every ul > li > a will have a padding-left+10 of it's parent a tag.

you can use forloop for adding css for all the anchor tags at once.
add class in anchor tag for get element by class
var lis = document.getElementByClass("link").getElementsByTagName("li");
after this you can implement css using javascript:
var sheet = window.document.styleSheets[0];
sheet.insertRule('a { padding-left: 50px; }', sheet.cssRules.length);

Can I display lists (<ol>, <ul>) as inline items?

I know they are block elements, but I'm sure there is a way, maybe with CSS? I tried to use the span tag but it doesn't work. What did I do wrong? I would like to put the second element next to the first one on the website. Not under it, but next.
<span>
<section>
<h3>Favourite quotes</h3>
<ul>
<li>
“Pizza is good" ―Me
</li>
</ul>
</section>
</span>
<span>
<section>
<h3>Favourite series</h3>
<ul>
<li> X </li>
<li> Y </li>
<li> Z </li>
</ul>
</section>
</span>

make the two "span" "inline-block" display and that's it!
.first,.second{
display:inline-block;
}
<span class="first">
<section>
<h3>Favourite quotes</h3>
<ul>
<li>
“Pizza is good" ―Me
</li>
</ul>
</section>
</span>
<span class="second">
<section>
<h3>Favourite series</h3>
<ul>
<li> X </li>
<li> Y </li>
<li> Z </li>
</ul>
</section>
</span>

Try something like this
.displayList .ol .ul {
visibility: visible;
}

Using span this way is wrong because span is inline element and you can't wrap section like this and any other block's. You can use <table> or flexbox for this case.
.container {
display: flex;
}
.container section {
width: 50%;
}
<div class="container">
<section>
<h3>Favourite quotes</h3>
<ul>
<li>“Pizza is good" ―Me</li>
</ul>
</section>
<section>
<h3>Favourite series</h3>
<ul>
<li> X </li>
<li> Y </li>
<li> Z </li>
</ul>
</section>
</div>

How to select child elements, of the same name, separately under two different parents, of the same name

I am very new to this and my code is probably very sloppy, excessive and redundant, so I apologize for that.
I am trying to add one final piece to my nav bar. Here is the HTML, a fiddle will be attached at the bottom.
<body>
<div id="container">
<header class="main-header">
<ul class="main-nav">
<li> <a id="h" href=".html">_______ _______ __________</a> </li>
</ul>
<ul class="second-nav">
<li> <a id="a" href=".html">_____ __</a> </li>
<li class="dropdown"> <a id="p" href=".html">_________</a>
<ul class="drop-nav">
<div class="flyout">
<li> <a id="r" href=".html">___________</a> </li>
<ul class="flyout-nav">
<li> ___ </li>
<li> ______ _ _____ </li>
<li> ______ ________ </li>
</ul>
</div>
<div class="flyout">
<li> <a id="c" href=".html">__________</a> </li>
<ul class="flyout-nav">
<li> ______ ________ </li>
<li> ___________ </li>
<li> ______ _____ </li>
</ul>
</div>
<li> ______ _______ </li>
</ul>
</li>
<li> _______ __ </li>
</ul>
</header>
I am attempting to select the two different "flyout-nav"s individually, however I cannot seem to find the correct specificity to select each individually.
All I need to do is round the top left corner on the second "flyout-nav" while keeping the first "flyout-nav"s top left corner square.
I believe my problem is that when I try to select the first child of the "flyout" is selects both "flyout-nav"s as they are both the first children and I have been looking into nth-children and other child selectors but to no avail. At this point after combing through the code for a few days now attempting to make it more efficient and find an order that will make it work I need some new eyes on the code to see what my eyes have been blinded to.
Here is the Jsfiddle with my css (note css is probably more sloppy than my code, still attempting to figure out the whole organization thing).
Thank you for the assistance and please don't hesitate to ask me to clarify anything.
Fix:
I changed the second "flyout-nav" to "flyout-nav1" and then updated all of the css that was associated with "flyout-nav" to also incorporate "flyout-nav1"
new Jsfiddle here

Your HTML structure is invalid. This is a valid HTML structure.
<!DOCTYPE html>
<head>
<title>Test</title>
</head>
<body>
<div id="container">
<header class="main-header">
<ul class="main-nav">
<li>
<a id="h" href=".html">_______ _______ __________</a>
</li>
</ul>
<ul class="second-nav">
<li>
<a id="a" href=".html">_____ __</a>
</li>
<li class="dropdown"> <a id="p" href=".html">_________</a>
<ul class="drop-nav">
<li class="flyout">
<a id="r" href=".html">___________</a>
<ul class="flyout-nav">
<li>___
</li>
<li>______ _ _____
</li>
<li>______ ________
</li>
</ul>
</li>
<li class="flyout">
<a id="c" href=".html">__________</a>
<ul class="flyout-nav">
<li>______ ________
</li>
<li>___________
</li>
<li>______ _____
</li>
</ul>
</li>
<li>
______ _______
</li>
</ul>
</li>
<li>
_______ __
</li>
</ul>
</header>
</div>
</body>
Then use :nth-child() selector, or add a custom class.
Try out nth-child here:
https://css-tricks.com/examples/nth-child-tester/

Try using the 'adjacent sibling selector' (+):
ul.drop-nav div.flyout + div.flyout ul.flyout-nav {
/* css for the second flyout */
}
JSFiddle Demo

I believe Mr__Goat wants to select the two elements individually so he can apply different styling to each. The following CSS selectors will refer to each element individually.
/* First .flyout-nav */
.drop-nav .flyout-nav:nth-of-type(1) {
}
/* Second .flyout-nav */
.drop-nav .flyout-nav:nth-of-type(2) {
}

dropdown menu using HTML and CSS is giving me a headache

<div class="fbtop">
<img src="https://static.solidshops.com/1441/files/Logo-site.png" title="Pieke Wieke" alt="Pieke Wieke">
<h2 class="title">Zelfgemaakt met liefde</h2>
<ul class="dropdown">
<li>
Naaibenodigdheden
<ul class="sub_menu">
<li>
Allerlei
</li>
<li>
Spelden
</li>
<li>
Naalden
</li>
</ul>
</li>
<li>
Stoffen
<ul class="sub_menu">
<li>
Effen
</li>
<li>
Katoen
<ul>
<li>
Pieke Wieke for Soft Cactus
</li>
<li>
Soft Cactus
</li>
<li>
Bedrukte katoen
</li>
<li>
Basics
</li>
<li>
Stretchkatoen
</li>
</ul>
</li>
<li>
Bedrukt
</li>
<li>
Stretch katoen
</li>
<li>
Tricot
</li>
<li>
Flannel
</li>
<li>
Gabardine
</li>
<li>
Ribfluweel
</li>
<li>
Voering
</li>
<li>
Teddy fleece
</li>
<li>
Geweven
</li>
</ul>
</li>
<li>
Flockfolie
</li>
<li>
Workshops
</li>
<li>
Waardebonnen
</li>
<li>
Vlieseline
</li>
<li>
Fournituren
<ul class="sub_menu">
<li>
Lint
</li>
<li>
Garen
</li>
<li>
Ritsen
</li>
<li>
Paspel
</li>
<li>
Biais
</li>
<li>
Elastiek
</li>
</ul>
</li>
</ul>
</div>
It's a classic way of doing dropdown menu's by css, to see it at work you can go to http://jsfiddle.net/W6Rhe/
There you'll also see the issue that I have with the menu. If you select the first item "Naaibenodigdheden" you'll see that the first sub menu item has front color white instead of red.
If you go to stoffen, you'll notice the same behaviour, if you select the sub menu "katoen" you'll notice the same behaviour again.
Now the cherry on the pie of this delicious issue is that when I adjust all my links to relative links (ie I remove https://blabla.blah.com) then All the items appear in red as intended.
What the hell am I doing wrong? I just don't get it.
ps tested this on chrome
ps2 it appears that when I replace the url in whatever is not what they are now, the problem does not occur, bizar is my only term for this behaviour

This code here:
ul.dropdown li a:visited,
ul.dropdown li a:hover
{
color:#fff;
}
is overriding the color on :visited links to white.
The reason the color changes when you use a relative URL is because the browser no longers sees it as visited, because it is a different path.

I have found the culprit, thanks to Andy for pointing me into the right direction:
ul.dropdown ul li a:hover,
ul.dropdown ul li a:active,
ul.dropdown ul li a:link {color: #e10707; }
He noticed that the links that were still white were in fact links colored trough the :visited attribute that was declared #fff or white :)
There is one state missing in the previous code block, indeed the a:visited color is not set to red, that's why it was white

list style image not aligned vertically

I used image list style and trying to align it perfectly well with the text in vertical.
JSFiddle: http://jsfiddle.net/uwzW5/
But it seems the text is always down by 2px-3px. How can I fix this issue?
<div class="col-md-3 feature-ul-section">
<ul>
<h3>TRACK</h3>
<li> Detailed event tracking:
<ul class="sub-feature features-close">
<li> Timestamp</li>
<li> IP</li>
<li> Country</li>
</ul>
</li>
<li> Conversions Tracking
<ul class="sub-feature features-close">
<li> <a >Double tier conversion</a></li>
<li> <a>Configurable cookies</a></li>
<li> Track multiple conversions</li>
<li> Track product ID</li>
<li> Track custom parameters</li>
<li> Track conversion value</li>
<li> Track commission amount</li>
<li> http/https</li>
</ul>
</li>
<li> <a>Google Analytics UMT</a></li>
</ul>
</div>
and css
.feature-ul-section ul li {
list-style-image: url(../img/green-list.png);
font-family:'Source sans pro';
}
.feature-ul-section ul li ul li {
list-style-image: url(../img/grey-list.png);
}

You can add a span element inside each li element and then add CSS style to the span element
Try
HTML:
<div class="col-md-3 feature-ul-section">
<ul>
<h3>TRACK</h3>
<li> <span>Detailed event tracking:</span>
<ul class="sub-feature features-close">
<li> <span>Timestamp</span></li>
<li> <span>IP</span></li>
<li> <span>Country</span></li>
</ul>
</li>
</div>
CSS:
span{
position:relative;
top:-3px;
}
DEMO