дисплей: нет на всех, кроме первого дочернего элемента

Question

<p><span>*</span>Here lies a note.</p> 

с помощью CSS, как можно скрыть (то есть, display:none) текст: «Здесь лежит записка.» И показать только «*»?

Answer 1

Поскольку вы не можете выбирать текстовые узлы с помощью CSS, один из них - установить font-size родительского элемента на 0, что эффективно скроет весь текст. Затем вы можете сбросить текст для нужного элемента.

.target { 
 
    font-size: 0; 
 
} 
 
.target > :first-child { 
 
    font-size: 16px; 
 
}

<p class="target"> 
 
    <span>First node</span> 
 
    Second node 
 
    More text nodes... 
 
</p>

---

В качестве альтернативы, вы можете также использовать visibility property, а также (так как вы можете установить дочерний элемент к visibility: visible даже тогда, когда родительский элемент установлен в visibility: hidden:

.target { 
 
    visibility: hidden; 
 
} 
 

 
.target > :first-child { 
 
    visibility: visible; 
 
}

<p class="target"> 
 
    <span>First node</span> 
 
    Second node 
 
    More text nodes... 
 
</p>

---

В качестве примечания, если вы хотите альтернативу, можно обернуть текстовые узлы с <span> элементов с помощью JavaScript, а затем установить display из всех дочерних элементов, которые не первый ребенок none используя селектор:

.target > :not(:first-child) { 
    display: none; 
} 

Здесь фрагмент демонстрирует это:

var target = document.querySelector('.target'); 
 
Array.from(target.childNodes).forEach(function (node, index) { 
 
    if (node.nodeType === 3 && node.nodeValue.trim()) { 
 
    var span = document.createElement('span'); 
 
    span.textContent = node.nodeValue; 
 
    target.replaceChild(span, node); 
 
    } 
 
});

.target > :not(:first-child) { 
 
    display: none; 
 
}

<p class="target"> 
 
    <span>First node</span> 
 
    Second node 
 
    More text nodes... 
 
</p>

---

Если вы используете JQuery, это было бы еще короче:

$('.target').contents() 
 
    .filter(function() { 
 
    return this.nodeType === 3 && this.nodeValue.trim(); 
 
    }).wrap('<span />');

.target > :not(:first-child) { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="target"> 
 
    <span>First node</span> 
 
    Second node 
 
    More text nodes... 
 
</p>

Answer 2

Вы можете использовать visibility скрыть родителя и показать дочерний элемент.

p { 
 
    visibility: hidden; 
 
} 
 
p > :first-child { 
 
    visibility: visible; 
 
}

<p><span>*</span>Here lies a note.</p>